使用角度验证单击提交按钮时未显示错误消息答案

【问题标题】：Error messages are not shown on clicking submit button using angular validation使用角度验证单击提交按钮时未显示错误消息
【发布时间】：2016-07-19 11:09:08
【问题描述】：

我正在处理角度表单验证。除了其他验证之外，我还希望如果我们在不触摸任何字段的情况下提交表单，那么所有错误消息都应该显示在表单中。这里我在名称字段中使用下面的代码，这样如果我们点击提交按钮而不触摸名称字段然后名称字段中的错误应显示为红色边框，但它不起作用-

     <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && (myForm.submitted  || myForm.name.$touched ) }">

    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.submitted  || myForm.name.$touched )">Name</label>
                       <label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.submitted  || myForm.name.$touched )">
                            Please enter the name
                        </label><br>
    <input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>

</div>

我在这里创建了一个 plunker-https://plnkr.co/edit/33EbFu7pQuZrVyiuwNGZ?p=preview

谁能告诉我如何在点击提交按钮时实现带有红色边框的验证错误消息？

【问题讨论】：

标签： angularjs forms validation

【解决方案1】：

用myForm.$submitted代替myForm.submitted

<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched ) }">
    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched )">Name</label>
    <label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched )">
        Please enter the name
    </label><br>
    <input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>
</div>

【讨论】：