需要 ng-show 来验证输入，提交并且提交后不再显示消息

Question

我不知道如何正确配置 ng-show。

这是怎么回事：

我有4个输入，好的。这些正在验证中。
提交，ok
将其保存在我的数据库中后，我清理了字段，但显示了必填字段的消息，但未提交。我只需要显示用户是否提交但没有文本。

这是我的 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>

Answer 1

嗯，如果我明白你的想法，你需要重新设置你的表单验证吗？

清理完你的字段后，所有消息仍在显示，你应该需要设置验证以隐藏它。

在你的清洁功能上你应该放类似这样的东西：

$scope.formCadastroPecas.$setValidity(); //hide messages of validation


$scope.formCadastroPecas.$setUntouched(); // set untouched the field if needed.

此外，如果您需要，可以为字段预先设置一些值并使用

$scope.formCadastroPecas.$setPristine();

编辑

我将在 bootstrap

上为您提供一个使用 ngMessages 进行验证的示例

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

需要 ng-show 来验证输入，提交并且提交后不再显示消息

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

validation

angularjs

angularjs-ng-show