Выполнение событий формы с помощью угловой директивы

Question

У меня есть пользовательское сообщение об ошибке html5 для ввода, которое изменяет текст ошибки проверки в хроме.

<input 
    oninvalid="setCustomValidity('It's custom message!')" 
    onchange="try{setCustomValidity('')}catch(e){}"> 

Как я могу это сделать с помощью Угловой директивы?

Обновлено

Допустим, я хочу типа <input custom-validity> вместо этого.

Answer 1

Вы можете узнать все о верификации формы Углового способа в своем documentation.

Вам не нужно создавать свои собственные директивы, поскольку угловые уже имеют большую поддержку проверки формы, построенную в.

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

<div ng-app="app"> 
    <form name="myForm" novalidate> 
    <p> 
     <label>Name 
      <input type="text" name="name" ng-model="name" required> 
      <span ng-show="myForm.name.$invalid && myForm.name.$dirty"> 
       Name required 
      </span> 
     </label> 
    </p> 
    <p> 
     <label>Email 
      <input type="email" name="email" ng-model="email"> 
      <span ng-show="myForm.email.$invalid && myForm.email.$dirty"> 
       Put a valid email 
      </span> 
     </label> 
    </p> 
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid"> 
    </form> 
</div> 

Вы также можете стиль действительные/недействительные поля, используя правило стиля, как это:

form input.ng-invalid.ng-dirty { ... }