Problems with required no select in Angularjs

Question

Staff I have the following code:

<div class="form-group col-lg-6 col-xs-12 " style="    margin-bottom: 0px;">
    <label style="padding-top: 4px;margin-bottom: 3px;">Grupo</label>
    <select class="form-control " ng-options="grupo as grupo.descricao for grupo in vm.produto.listaGrupo" ng-model="vm.grupoSelecionado" required>
        <option value="">Escolha uma opção</option>
    </select>
</div>
<div class="form-group col-lg-6 col-xs-12 " style="    margin-bottom:5px;">
    <label style="padding-top: 4px;margin-bottom: 3px;">Tipo</label>
    <select class="form-control " ng-options="subGrupo.codigoTabItemSubGrupoId as subGrupo.descricao for subGrupo in vm.grupoSelecionado.tabItemSubGrupo" ng-model="vm.subGrupoSelecionado" required>
        <option value="">Escolha uma opção</option>
    </select>
</div>

My problem is that the two fields are as required, but when giving Ubmit with them empty, the operation happens normally, but the right thing would be to bar the operation because they are empty. All fields with required are with the expected behavior, only those 2 that are select that are not doing the validation correctly, if anyone can help me I appreciate.

Answer 1

Use ng-required to check whether the model’s value is empty or not. In the case: ng-required="vm.grupoSelecionado" and ng-required="vm.subGrupoSelecionado", remember that ng-required is based on expressions.