リアクティブフォーム（Angular 5（2+）Part 1

はじめに

Angularの利点の1つは、「すぐに使える」広範なツールであり、複雑なフォームをすばやく作成できます。



Angularでフォームを作成するには、2つのアプローチがあります。



テンプレート駆動型フォーム -コンポーネントテンプレートが重要な役割を果たし、その中で記述全体が生成されるアプローチ-このアプローチは、AngularJSでフォームを操作する開発です。



リアクティブフォーム - リアクティブフォームを操作するための新しいアプローチ。 フォームの説明は、オブジェクトのツリーの形式でコンポーネントに表示され、その後、このツリーはテンプレートに関連付けられます。 すべての操作（検証チェック、値を変更するためのサブスクリプションなど）はコンポーネントで実行されるため、作業がより柔軟で便利で予測可能になります。



この記事では、検証とエラーメッセージを含む単純なフォームを例として使用して、 リアクティブフォームを開始する方法について説明します。 コード例



リアクティブフォーム。 パート2

リアクティブフォームを作成する

ReactiveFormsModuleをモジュールに接続します。ここでは、フォームを使用します。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リアクティブ形式では、3種類のブロックが使用されます。

• FormControl-単一のフォームコントロール。
• FormGroup-フォームコントロールのグループ。
• FormArray-フォームコントロールの配列。

それらはすべてAbstract Controlから継承されます。



上記のブロックを作成できる特別なFormBuilderツールを使用してフォームを記述すると便利です。



フォームコンポーネントFormBuilderおよびFormGroupに追加します。

 import { Component } from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { myFirstReactiveForm: FormGroup; constructor(private fb: FormBuilder){} ngOnInit(){} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームを説明し、ngOnInitで初期化します。

 export class AppComponent implements OnInit { myFirstReactiveForm: FormGroup; constructor(private fb: FormBuilder){} ngOnInit(){ this.initForm(); } /**  */ initForm(){ this.myFirstReactiveForm = this.fb.group({ name: [''], email: [null] }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このフォームは2つのコントロールで構成されています。

• 初期化中に値「Ivan」を持つ名前 。
• 価値のないemai l。

ディレクティブformGroupおよびformControlNameを使用して、フォームをコンポーネントテンプレートに関連付けます。

 <form [formGroup]="myFirstReactiveForm"> <label for="name"></label> <input type="text" id="name" formControlName="name" /> <br/><br/> <label for="email">email</label> <input type="text" id="email" formControlName="email" /> <br/><br/> <button type="submit"></button> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、 formControlNameが名前を文字列として受け取り、[]なしで記述されていることに注意する必要があります。



valueプロパティを介してオブジェクトとしてコンポーネントのフォームデータを取得し、 jsonPipeを介してテンプレートに出力できます（この段階では、ヘルスをチェックする必要があります）。

 <div> {{myFirstReactiveForm.value | json}} </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

有効でないコントロールの検証と強調表示

Angularは、入力が特定の条件を満たすことを検証するValidatorsクラスの静的メソッドのリストを使用した検証オプションを提供します。



以下を使用します。

• Validators.required-コントロールを必須にします。
• Validators.email-メール検証 住所
• Validators.pattern-正規表現の検証。

角度/フォームからコンポーネントにバリデーターをインポートします。

 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それらをフォームコントロールの説明に追加します。

 this.myFirstReactiveForm = this.fb.group({ name: ['', [ Validators.required, Validators.pattern(/[-]/) ] ], email: ['', [ Validators.required, Validators.email ] ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Angularは、特定の条件に応じて、ペアのCSSクラスをすべてのフォームコントロールに動的に追加します。

• ng-invalid / ng-valid-コントロールの有効性に応じて変化します。
• ng-pristine / ng-dirty-値が少なくとも1回変更されている場合、コントロールはダーティと見なされます。
• ng-untouched / ng-touched-コントロールは最初にフォーカスを失ったときにタッチされたと見なされます。

CSSで、次のスタイルを追加します。

 input.ng-touched.ng-invalid{ border-color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、誤ったデータを入力してフォーカスを失うと、コントロールに赤い境界線が表示されます。

エラーメッセージ出力

次のようにして、コンポーネントのコントロールにアクセスできます。

 this.myFirstReactiveForm.controls[controlName]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

無効でタッチされたプロパティを確認してください。



ここでプロパティと制御メソッドの完全なリストを参照してください。



コンポーネントに、コントロールの有効性をチェックするメソッドを追加します。このメソッドは、コントロール名を入力として受け取り、true / falseを返します。

 isControlInvalid(controlName: string): boolean { const control = this.myFirstReactiveForm.controls[controlName]; const result = control.invalid && control.touched; return result; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートに、コントロールが無効な場合に* ngIfによって表示されるエラーメッセージを含むコントロールdivを追加します。

 <label for="name"></label> <input type="text" id="name" formControlName="name" /> <div class="error" *ngIf="isControlInvalid('name')">        </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（条件に応じて）さまざまなエラーを出力するには、 ngx-errorsライブラリを使用できます。

フォーム送信

onSubmitメソッドをコンポーネントに追加します。

 onSubmit() { const controls = this.myFirstReactiveForm.controls; /**     */ if (this.myFirstReactiveForm.invalid) { /**    ,      touched*/ Object.keys(controls) .forEach(controlName => controls[controlName].markAsTouched()); /**   */ return; } /** TODO:    */ console.log(this.myFirstReactiveForm.value); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームが有効でない場合、foreachを使用してすべてのコントロールをタッチ済みとしてマークし、エラーを強調表示してメソッドの実行を中断します。 それ以外の場合は、フォームデータを処理します。



送信イベントハンドラーをテンプレートに追加します 。

 <form [formGroup]="myFirstReactiveForm" (submit)="onSubmit()">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームの準備ができました！

おわりに

次の部分では、フォームを使用したリアクティブな作業を分析します。

支配権の変更のイベントへのサブスクリプション;

依存コントロールの動的なリセットとブロック。

フォーム内のコントロールとコントロールのグループの動的な追加と削除。

参照資料

こちらのサンプルコードをご覧ください 。

詳細については、 公式ドキュメントから入手できます 。

Angularに興味がある人は誰でも、Telegramでロシア語を話すAngularコミュニティのグループに参加できます。