使用角度验证单击提交按钮时不会显示错误消息

Question

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

     <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

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

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