web-dev-qa-db-ja.com

Angular 4はHTML5検証を有効にします

フォームのベースの検証/リアクティブ検証ではなく、Angular 4でHTML5検証を使用したい。検証をブラウザーで実行し続けたい。

以前はAngular 2で動作していましたが、アップグレードしたので、HTML5を使用して検証するためのangularディレクティブなしで手動で作成したフォームを取得することもできません。

たとえば、これはブラウザではまったく検証されません。

<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>
html5angular
22
Magn3s1um

Angular4はnovalidate属性をフォームに自動的に追加します。

enter image description here

これをオーバーライドするには、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と同じ効果があります。

お役に立てれば。

45
Tyler Jennings

フォームでngNoFormまたはngNativeValidateを使用します

<form ngNoForm/ngNativeValidate>
...
</form>
2
Sam