Como obrigar a seleção de uma opção no combo com ng-required

Programação
#1

Tenho um modal em que preciso obrigar que o usuário selecione uma opção do combo e também insira um valor no campo de input. Usei a diretiva ng-required e para exibir a mensagem de erro mas mesmo assim ele não está obrigando, Alguma idéia:

Desde já obrigado.

// **** html do Combo ******

	  <div class="modal-body">{{'application.outbound.outboundBatchControl.wantToSeparation'| translate}}</div>   
	    <div class="form-group">
	      <select ng-model="selectedLabelType"
	       	style="width: 500px"
			name="labelType"
			id="labelType"
			class="form-control"
			ng-options="labelType as labelType.label for labelType in labelType track by labelType.id"
			placeholder="{{'application.msg.labelSelect.labelType' | translate}}"
			ng-required="true">
			<span ng-class="error" ng-show="modalReprint.$error.required">Campo Combo é obrigatorio</span>				
			<option value="" >{{'application.msg.labelSelect.labelType' | translate}}</option>
	      </select>
	  </div>

// ********** html do Input ***********

	  <div class="form-group">
			<label for="LabelTo" class="control-label" translate>Label To</label>
			<input ng-model="inputPriorityTo"
			       style="width: 500px"
				   id="priorityTo" 
				   name="priorityTo" 
				   type="text" 
				   class="form-control fontSizeItemReceiving" 
				   maxlength="20"
				   ng-required="true"/>
				   <span ng-class="error" ng-show="modalReprint.$error.required">Campo From é obrigatorio</span>
	  </div>
#2

Acho que forma como vc está checando os erros pode dar problema.

Considerando que o select e o input estão dentro de um <form>, uma melhor solução seria assim:

<span ng-if="seuForm.inputPriorityTo.$invalid">mensagem</span>

Só que vc não quer que a mensagem aparece logo de cara, vc quer que ela apareça apenas se o usuário entrou com um valor e, por algum motivo, apagou este valor. Pra alcançar isso, vc pode adicionar mais um elemento à condição da seguinte forma:

<span ng-if="!seuForm.inputPriorityTo.$pristine && seuForm.inputPriorityTo.$invalid">mensagem</span>

Eu fiz um exemplo funcional pra te mostrar, segue abaixo o trecho do código, mas vc pode ver o resultado completo aqui

<form name="myForm">
  <div>
    <select name="mySelect" ng-model="mySelect" ng-required="true">
      <option selected value="">Escolha uma opção</option>
      <option ng-repeat="option in options" value="{{ option.id }}">{{ option.name }}</option>
    </select>

    <span ng-if="!myForm.mySelect.$pristine && myForm.mySelect.$invalid">
      Você deve escolher uma opção!
    </span>
  </div>

  <div>
    <input ng-model="myInput" name="myInput" type="text" ng-required="true" />

    <span ng-if="!myForm.myInput.$pristine && myForm.myInput.$invalid">
      Você deve escolher uma opção!
    </span>
  </div>
</form>

No caso do select, eu usei o truque de adicionar uma option a mais com valor vazio e adicionei o atributo selected, dessa forma, como esta opção adicional é invalida, vai obrigar o usuário a selecionar a opção certa pra poder continuar.

Se vc quiser impedir o usuário de voltar a selecinar a opção adicional depois que já tiver selecionado uma opção vávlida, basta adicionar o atributo disabled a esta opção, ficando assim:

<option disabled selected value="">Escolha uma opção</option>

Fazendo isso acho que até fica desnecessário mostrar a mesagem de erro do select.

#3

Perfeito wldomiciano obrigado. Um abraço.

1 curtida