angularjsvalidationangularjs-ng-show

need ng-show to validate inputs, submitt and not show the message again after submitting


I don't know how to configure correctly ng-show.

What is happening is this:

  1. I have 4 inputs, ok. Those are being validated.
  2. I submit, ok.
  3. After save it in my DB I clean the fields but the message of the required fields are being showed without being submitted. I just need to show if the user submits and has no text.

Here goes my html:

<div class="grid-form">
                <div class="grid-form1">
                    <h3 id="forms-example" class="">Cadastro de Peças</h3>

                    <form name="formCadastroPecas" id="formCadastroPecas" role="form" novalidate>

                        <div class="form-group">
                                <label for="labelNome">Nome da Peça:</label>
                                <br>
                                    <select size="3" style="width: 300px" multiple="" class="form-control1" ng-model="nome" ng-options="foo as foo for foo in names">
                                    </select>

                        </div>

                        <div class="form-group">
                            <label for="fabricante">Fabricante:</label> <input
                                type="text" class="form-control" id="fabricante" ng-model="fabricante" name="fabricante" required>
                            <span style="color: red"
                              ng-show="submitted && formCadastroPecas.fabricante.$error.required" >Campo
                              Fabricante Obrigatório.</span>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Modelo:</label> <input
                                type="text" class="form-control" id="modelo" ng-model="modelo" name="modelo" required>
                            <span style="color: red"
                              ng-show="submitted && formCadastroPecas.modelo.$error.required" >Campo
                              Modelo Obrigatório.</span>
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">Preço de Compra:</label> <input
                                type="text" class="form-control" id="precoCompra" ng-model="precoCompra" name="precoCompra" required>
                            <span style="color: red"
                              ng-show="submitted && formCadastroPecas.precoCompra.$error.required" >Campo
                              Peço de Compra Obrigatório.</span>
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">Preço de Venda:</label> <input
                                type="text" class="form-control" id="precoVenda" ng-model="precoVenda" name="precoVenda" required>
                                <span style="color: red"
                              ng-show="submitted && formCadastroPecas.precoVenda.$error.required" >Campo
                              Preço de Venda Obrigatório.</span>
                        </div>
                        <button type="submit" class="btn btn-lg btn-danger" ng-disabled="form.$invalid" ng-click="submitForm(formCadastroPecas)">Cadastrar</button>
                        <br>
                        <span align="left" id="retornoValidacao" style="color: red">{{retorno.data.message}}</span>
                        <div class="alert alert-success" ng-show="show" role="alert"> 
                                <center> 
                                    <strong>OK!</strong> Peça cadastrada com sucesso. 
                                </center> 
                        </div> 
                    </form>

Solution

  • Uhm if i catch your idea, you need to reset the validation of your form right?

    after clean your field, all the messages are still displaying, you should need to set the validation to hide it.

    on your cleaning function you should put something similar to this:

    $scope.formCadastroPecas.$setValidity(); //hide messages of validation
    
    
    $scope.formCadastroPecas.$setUntouched(); // set untouched the field if needed.
    

    Also if you need you can pre-set some values to the fields and use

    $scope.formCadastroPecas.$setPristine();
    

    EDIT

    i'll leave you an example of validation with ngMessages on bootstrap

    <div class="form-group" data-ng-class="
                                  {'has-error has-feedback': yourForm.nombre.$invalid && !yourForm.$pristine && yourForm.nombre.$dirty,
                             'has-success has-feedback': yourForm.nombre.$valid,
                         'has-warning has-feedback': yourForm.nombre.$invalid&& yourForm.nombre.$touched}">
    <!-- LABEL INPUT NOMBRE-->
    <label class="col-lg-4 control-label">Nombre</label>
    <!-- INPUT NOMBRE-->
    <div class="col-lg-8">
        <input type="text" class="form-control" ng-minlength="4" ng-maxlength="20" maxlength="25" ng-model="user.nombre" name="nombre"
            required placeholder="Nombre" />
        <!-- MENSAJES-->
        <div ng-messages="yourForm.nombre.$error" ng-if='yourForm.nombre.$dirty || yourForm.nombre.$touched'>
            <div ng-message="minlength">Nombre demasiado corto.</div>
            <div ng-message="maxlength">Nombre demasiado largo.</div>
            <div ng-message="required" style="color: #8a6d3b;">Este campo no puede estar vacio.</div>
        </div>
        <!-- ICONOS DE MENSAJE-->
        <span ng-show="yourForm.nombre.$dirty && yourForm.nombre.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
        <span ng-show="yourForm.nombre.$dirty && yourForm.nombre.$invalid" class="glyphicon glyphicon-remove  form-control-feedback"></span>
        <span ng-show="yourForm.nombre.$touched && yourForm.nombre.$pristine" class="glyphicon glyphicon-warning-sign  form-control-feedback"></span>
    </div>