Angular 4 HTML5-Validierung aktivieren

Question

Ich möchte die HTML5-Validierung in Angular 4 verwenden und nicht auf ihre formularbasierte Validierung/reaktive Validierung. Ich möchte die Validierung im Browser laufen lassen.

Früher arbeitete es in Angular 2, aber seit ich aktualisiert habe, kann ich nicht einmal manuell erstellte Formulare ohne irgendwelche eckigen Anweisungen zur Validierung mit HTML5 bekommen.

Zum Beispiel wird dies nicht in dem Browser validieren:

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

Answer 1

Angular4 fügt automatisch ein novalidate Attribut Formen.

dieses außer Kraft zu setzen, können Sie die ngNativeValidate Richtlinie zum Formular hinzufügen.

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

Leider kann ich nicht sehen, das noch in der Dokumentation wider, sondern fand es durch den Quellcode suchen: https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts

Es ist auch ngNoForm zum Formular hinzugefügt scheint hat die gleiche Wirkung wie ngNativeValidate je auf Ihren Use-Cases, weil Sie aus irgendeinem Grund etwas als Nicht-Form deklarieren müssen.

Hoffe, das hilft.

Answer 2

Verwendung ngNoForm oder ngNativeValidate in Ihrem Formular

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