AngularJSフォーム検証

983 ワード

実際に作ったプロジェクトは、フォームの検証はあまり多くありませんが、多くのテーブルが表示されます.
アリ怠け者交流会のAngularJSフォームの検証を聞いて、まとめましょう.

問題:データバインド、遍歴検証、エラー情報表示、非同期検証、ブロック

原生HTML 5検証を無効にする:form/ng-form novalidate

アクセスフォームのプロパティ:

form-name.angular-property
form-name.input-name.angular-property

送信ボタンを設定disabled属性

<button ng-disabled="form.$invalid">button>

formが不正な場合は

を禁止する.

エラーメッセージng-show=""赤が欲しいng-class="{‘has-error’:form.email.invaild&&form.email.dirty}"

カスタム検証コンポーネント:カスタム命令

を書く

フォーム内の各入力項目(ngForm-ネストフォーム)formName.をそれぞれ検証する方法fieldName.$valid a.各fieldNameはそれぞれ異なるformNameのb.各fieldNameに異なる名前ngModel.$を付けるaddControl

不足:キーボード処理、位置方式が柔軟ではなく、よく検証コンポーネントを使用し、多くの類似のエラーが論理

を示している.