当字段无效时，不会显示AngularJS验证消息

Question

我在html表单中使用angularJs验证。我在输入上使用了所需的验证，当我删除那里的值时，文本框变为红色并尝试提交弹出错误“请填写此字段”但是我的自定义错误消息未显示。以下是代码。

 <form id="settingsForm" ng-submit="vm.saveSettings()" class="form">
     <td style="width:30%">
          <input class="userInput" name="locationName" style="width:80%" type="text" maxlength="50" data-ng-model="vm.location.locationName" required />
          <label class="validationErrorText" data-ng-show="locationSettingsForm.locationName.$error.required">Location Name Required</label>
    </td>
 </form>

知道为什么会这样吗？附件是截图，显示字段未填充时的显示方式。

Answer 1

我已经创建了一个可以帮助你的plunker。

http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF

<form role="form" name="signUpForm" class="form-horizontal">
 <div class="form-group">
    <label for="url" class="col-sm-4 control-label">URL</label>

    <div class="col-sm-8">
      <input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
             ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-@_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">

      <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
          <small class="text-danger">Please enter valid URL.</small>
      </span>
      <span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
          <small class="text-danger">URL should have 2 to 25 characters.</small>
      </span>
    </div>
  </div>
</form>

您可以使用类似的验证。 name属性应与条件匹配。这是url。

Answer 2

添加

name="locationSettingsForm"

到<form>元素