Сообщение о проверке AngularJS не отображается, если поле недействительно

Question

Я использую проверку углов в моей html-форме. Я использую требуемую проверку на входе, и когда я стираю это значение, текстовое поле получает красную красную печать и пытается отправить всплывающее сообщение об ошибке «Пожалуйста, заполните это поле». Но мое пользовательское сообщение об ошибке не отображается. Ниже приведен код.

<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

Добавить

name="locationSettingsForm" 

к <form> элементу

Answer 2

Я создал 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.