Angular のフォームを詳しく理解する

この記事では、Angular のフォームについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Angular フォーム

---

テンプレート フォームとは

フォームのデータ モデルは、コンポーネント テンプレート内の関連する指示を通じて定義されます。この方法でフォームのデータ モデルを定義すると、HTML の構文によって制限されるため、テンプレート-driven メソッドのみ いくつかの単純なシーンに適しています。

リアクティブ フォームとは

リアクティブ フォームは、時間の経過とともに値が変化するフォーム入力を処理するためのモデル駆動型の方法を提供します。リアクティブ フォームを使用する場合は、HTML コードの代わりに TypeScript コードを記述して基になるデータ モデルを作成します。モデルを定義した後、いくつかの特定の命令を使用して、テンプレート上の HTML 要素を基になるデータ モデルに接続します。

注:

• データ モデルは任意のオブジェクトではなく、FormControl などの angular/forms モジュールの特定のクラスです。 FormGroup、FormArray などのテンプレート化されたフォームでは、これらのクラスに直接アクセスすることはできません。 [関連する推奨事項: "

  angular チュートリアル "]

• レスポンシブ フォームでは HTML が生成されません。テンプレートは自分で記述する必要があります。

• テンプレート フォームでは、データ モデルに関連するクラスにアクセスできず、フォームの最終データのみを取得できます。レスポンシブ フォームでは、クラスにアクセスできます。データ モデルに関連しますが、参照できないため、テンプレート内で操作することはできず、TypeScript コード内でのみ操作できます。

#レスポンシブ フォーム

##FormGroup

FormGroupフォームの一部またはフォーム全体を表し、複数の FormControl のコレクションです。 FormGroup は複数の FormControl の値とステータスをまとめて集計するため、フォーム検証時に FormGroup 内の 1 つの FormControl が無効な場合、FormGroup 全体が無効になります。

FormControl

FormControl はフォームを構成する基本ユニットです。通常は入力要素を表すために使用されますが、より複雑な要素を表すためにも使用できます。カレンダーなどのコンポーネントのドロップダウン選択ボックス。 FormControl は、関連付けられている HTML 要素の現在の値、要素の検証ステータス、要素が変更されているかどうかなどの情報を保存します。

FormArray

FormArray は FormGroup に似ていますが、長さのプロパティがあります。一般に、FormGroup はフォーム全体またはフォーム フィールドの固定サブセットを表すために使用され、FormArray は通常、増加する可能性のあるフィールドのセットを表すために使用されます。

フォーム検証

Angular 組み込みバリデーター

Angular はいくつかの組み込みバリデーターを提供します。以下は次のとおりです。より一般的に使用されるバリデータ:

Validators.required - フォーム コントロールの値が空ではありません

Validators.email - フォーム コントロールの値の形式は email
• Validators.minLength() - フォーム コントロール値の最小長
• Validators.maxLength() - フォーム コントロール値の最大長
• Validators.pattern() - の値フォーム コントロールは、対応するパターン (正規表現) と一致する必要があります。
• カスタム レスポンシブ フォーム バリデータ

実際の開発では、プロジェクトでは、いくつかのバリデーターをカスタマイズする必要があります。通常の状況では、検証関数は次の形式で定義できます:

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 编写校验规则   
      return null;  
 }

以下では、例として一般的な登録ページを取り上げます:

初期化フォーム

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密码    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手机号    
        mobile: ['', this.moblieValidator]  });
 }

Writing Validator

// 手机号码校验
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果：', valid); 
   return valid ? null : { mobile: true };
}

// 密码校验
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密码校验结果', valid);  
   return valid ? null : { equal: true };
}

Angular Asynchronous Validator

Angular のフォーム API は非同期バリデータ、非同期バリデータもサポートしていますリモート サービスはフォームフィールドの値をチェックするために呼び出されます。非同期バリデーターは通常のバリデーターに似ており、メソッドでもありますが、唯一の違いは、非同期バリデーターがオブジェクトではなく監視可能なストリームを返すことです。

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log(&#39;mobile的校验结果：&#39;, valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular ステータス フィールド

##touched

および

untouched
• #これら 2 つのフィールドは、ユーザーがフィールドにアクセスしたかどうか、つまり、このフィールドがフォーカスを受け取ったかどうかを示します。通常、フォームのエラー メッセージが表示されるかどうかを決定するために使用されます。同時に、いずれかのフィールドがタッチされた場合、フォーム全体の touched 属性は true になります。すべてのフィールドがタッチされていない場合にのみ、フォーム全体の untouched 属性は true になります。
  • pristine 和 dirty

  如果一个字段的值从来没有改变过， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改过， 那么它的pristine 就是 false， dirty 就是 true。 同时， 如果任何一个字段是 dirty， 那么整个表单的 dirty 属性就是 true； 只有所有字段是 pristine 时， 整个表单的 pristine 属性才是 true。

  • pending

  当一个字段处于异步校验时， 该字段的 pending 属性是 true。

  自定义模板式表单的校验器

  在Angular のフォームを詳しく理解する里， 我们后台有一个编码的数据模型， 只需要将校验器的方法挂在指定字段属性上就可以了。 但是， 在模板式表单里， 后台是没有这类数据模型的， 指令才是唯一能用的东西， 所以我们需要将校验方法包装成指令， 然后才能在模板中使用它。

  编写指令

  @Directive({  
     selector: '[mobile]', 
      providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
   export class MobileValidatorDirective {  
      constructor() { }
   }
   
  // html中引用
  <div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

  mutli: true ：指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。

  注意: 在模板式表单中， 是不可以在模板中使用字段的状态属性的。 模板式表单与Angular のフォームを詳しく理解する不同， 它的模型的值和它状态的变更是异步的， 而且很难控制。
  如果想要使用字段的状态属性，我们可以进行如下操作：

  // .html文件中
  <div>  
     用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
  </div>
  <div [hidden]="usernameValid || usernameUntouched">  
      <div [hidden]="!myForm.form.hasError(&#39;required&#39;, &#39;username&#39;)">
        用户名是必填项！
      </div>  
      <div [hidden]="!myForm.form.hasError(&#39;minlength&#39;, &#39;username&#39;)">
        用户名长度至少是6位！
      </div>
  </div>
  // .ts文件中
  usernameValid = true; 
  usernameUntouched = true; 
  onUsernameInput(form: NgForm): void {  
     if (form) {
        this.usernameValid = form.form.get(&#39;username&#39;).valid;    
        console.log(&#39;valid&#39;, this.usernameValid);          
        this.usernameUntouched = form.form.get(&#39;username&#39;).untouched;   
        console.log(&#39;untouched&#39;,   this.usernameUntouched);
      }
  }

  小结: 在使用字段的状态属性时， Angular のフォームを詳しく理解する比模板式表单更方便，可以节省很多代码，而且比较可控。所以模板式表单适合用于一些简单的场景。

  更多编程相关知识，请访问：编程视频！！

以上がAngular のフォームを詳しく理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。