Force selection on ng-required combo

Question

I have a modal where I need to force the user to select a combo option and also enter a value in the input field. I used the ng-required directive and to display the error message but still it is not forcing, Any idea:

Thanks in advance.

// **** combo html ******

      <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>

// ********** input html ***********

      <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="controller.isRequired"/>
                   <span ng-class="error" ng-show="modalReprint.$error.required">Campo From é obrigatorio</span>
      </div>

Answer 1

There are some errors in your code:

• To validate fields with the Angularjs they must be within an element form with an attribute name obligatory
• In this case there is no mandatory use of the directive ng-required, because only the attribute of HTML5 required is already sufficient for the field to be mandatory
• The condition of the directive ng-show first must contain the form name, then the field name (input, select, checkbox, etc...), followed by validation which can be $pristine, $invalid, etc.. You can see the full list here

I used $Touched so that when the field is touched the validation happens along with the $invalid, tbm put the condition on the button salvar, so that while the field is invalid the button remains desabilitado, forcing the user to fill in the field. I just made an example for the input, then you just implement the same for the select:

.error {
  color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app>
  <!-- Botão para acionar modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">Abrir modal</button>

  <!-- Modal -->
  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form name="myForm">
            <div class="form-group">
              <label for="LabelTo" class="control-label" translate>PRIORIDADE</label>
              <input ng-model="priorityTo"
                id="_priorityTo" 
                name="priorityTo" 
                type="text" 
                class="form-control fontSizeItemReceiving" 
                maxlength="20"
                required>
              <span class="error" ng-if="myForm.priorityTo.$touched && myForm.priorityTo.$invalid">Campo PRIORIDADE é obrigatorio</span>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="button" class="btn btn-primary" ng-disabled="myForm.priorityTo.$invalid">Salvar mudanças</button>
        </div>
      </div>
    </div>
  </div>
</div>