Angular 4 включить проверку HTML5

Я хочу использовать проверку HTML5 в Angular 4, а не проверку на основе формы/реактивную проверку. Я хочу, чтобы проверка выполнялась в браузере.

Он работал в Angular 2, но поскольку я обновился, я не могу получить даже созданные вручную формы без каких-либо директив Angular для проверки использования HTML5.

Например, это вообще не будет проверяться в браузере:

<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

Ответ 1

Angular4 автоматически добавляет атрибут novalidate к формам.

Чтобы переопределить это, вы можете добавить директиву ngNativeValidate в форму.

<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

К сожалению, я пока не вижу этого в документах, но нашел его, посмотрев исходный код: https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts

Похоже, что добавление ngNoForm к форме имеет тот же эффект, что и ngNativeValidate, в зависимости от ваших случаев использования, для того, чтобы объявить что-то как не форму по какой-либо причине.

Надеюсь, что это поможет.

Ответ 2

используйте ngNoForm или ngNativeValidate в своей форме

<form ngNoForm/ngNativeValidate>
...
</form>