Angular 8フォーム内蔵API覗き込み

作成
formControl
インスタンスは、単一のフォームコントロールの値と検証ステータスを追跡するために使用されます.

  

    

      
      missing required!
    
  

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-create-form',
  templateUrl: './create-form.component.html',
  styleUrls: ['./create-form.component.scss']
})
export class CreateFormComponent implements OnInit {
  projectName: FormControl;
  constructor() { }

  ngOnInit() {
    this.projectName = new FormControl('123');
  }
}

上記の入力コントロールは、formControlタイプの初期値をバインドし、検証ルールは追加されず、内蔵APIを使用してルール、検証などの操作を追加します.

  projectNameValidate() {
    //         
    this.projectName.clearValidators();
    //       
    this.projectName.setValidators([Validators.required]);
    this.projectName.updateValueAndValidity();
  }

FormGroup
FormControlインスタンスのセットの値と有効性のステータスを追跡

outlayFormInit() {
  this.outlayGroup = new FormGroup({
    activity: new FormControl(null, [Validators.required]),
    project: new FormControl(null, [Validators.required])
  });
}

現在フォームは応答式タイプで、デフォルトchange状態で検証され、初期値はいずれも空値(null代替'の使用を推奨)である現在需要が変動しており、申請書のデフォルトの団建費用の初期値は1001に設定されているが、会社の今年の利益はあまりよくなく、団建費用は1000を超えてはならない.

outlayFormInit() {
    this.outlayGroup = new FormGroup({
      activity: new FormControl(1001, [Validators.required, Validators.max(1000)]),
      project: new FormControl(null, [Validators.required])
    });
  }

もし私たちが申請ページに入って、直接申請をクリックすると、提出しませんが、ヒントや赤の効果もありません.今、手動でフォーム内のオプションをチェックする必要があります.

 outlayGroupSubmit(event) {
    if (!this.outlayGroup.valid) {
      const controls = this.outlayGroup.controls;
      for (const key in controls) {
        if (controls.hasOwnProperty(key)) {
          const formField = controls[key];
          formField.markAsDirty();
          formField.updateValueAndValidity();
        }
      }
      return;
    }
    // submit to ...
  }

いずれかのformControlに対して操作する場合は、コントロールを取得してから操作します.

this.outlayGroup.get('activity').markAsDirty();
this.outlayGroup.get('activity').updateValueAndValidity();

tip:汚れた値としてマークすることを忘れないでください.
FormArray
コントロール配列の値と有効性ステータスを追跡します.

  

    

      

        
            
          
            
          
        
      
      

        
            
          
            
          
        
      
    
    

          
          ：
      

        

          

            
              
                
              
            
          
        
      
    
    

      

            
      
    
  

get plaintiff() {
    return this.prosecuteForm.get('plaintiff') as FormArray;
  }
  prosecuteFormInit() {
    this.prosecuteForm = new FormGroup({
      date: new FormControl(null, [Validators.required]),
      defendant: new FormControl(null, [Validators.required]),
      plaintiff: new FormArray([
        new FormControl(2, [Validators.required])
      ])
    });
  }
  addMembers() {
    this.plaintiff.push(new FormControl(null,[Validators.required]));
  }
  prosecuteFormSubmit() {
    console.log(this.prosecuteForm);
    this.plaintiff.controls.forEach((control, index) => {
      control.markAsDirty();
      control.updateValueAndValidity();
    });
  }

FormArrayの配列要素はFormControlインスタンスです.指定されたControlを一組のListから取得するにはat(index)で取得して様々な操作が可能であることが重要である.新しいControlを追加するには、addメソッドではなくFromArrayインスタンスを取得した後にpushを取得する必要があります.
FormBuilder
これは、レスポンスフォームコントロールを作成するための注入可能なサービスプロバイダです.
企業情報を記録する簡単なフォームを作成

enterprisesInit() {
    this.enterprisesFormData = this.fb.group({
      enterpriseName: ['', Validators.required],
      enterpriseAddr: [''],
      tel: ['']
    });
  }

このサービスを使用してフォームを作成するのは、前の3つの方法よりも簡単で分かりやすいです.
更新(値、ステータス、追加、削除など)
FormControl

this.projectName.setValue('456');
this.projectName.patchValue('789');

this.projectName.setValidators([Validators.required, Validators.minLength(5)]);
this.projectName.markAsDirty();
this.projectName.updateValueAndValidity();

formControlはコントロールですので、追加と削除はできません
FormGroup

outlayFormInit() {
    this.outlayGroup = new FormGroup({
      activity: new FormControl(1001, [Validators.required, Validators.max(1000)]),
      project: new FormControl(null, [Validators.required])
    });
    //      
    this.outlayGroup.get('activity').setValue(2000);
    //     
    this.outlayGroup.patchValue({
      project: '11100001',
      activity: 0
    });
    //   
    this.outlayGroup.addControl('other', new FormControl(100,[Validators.max(99)]));
    this.outlayGroup.addControl('game', new FormControl(1000));
    //   
    this.outlayGroup.removeControl('game');
    //   
    this.outlayGroup.get('other').markAsDirty();
    this.outlayGroup.get('other').updateValueAndValidity();
  }

FormArray

get plaintiff() {
    return this.prosecuteForm.get('plaintiff') as FormArray;
  }
  addMembers() {
    this.plaintiff.push(new FormControl(null, [Validators.required]));
  }

使用this.plaintiff.push(new FormControl())を追加します.取得使用this.plaintiff.at(i);削除this.plaintiff.removeAt(i)を使用して特定のControlコントロールを更新し、前のAPIと一致することを確認します.
FormBuilder
これは、フォームの作成タイプに応じて対応するAPIを使用する任意のタイプのコントロールを作成することができます.グループタイプが作成されている場合は、FormGroupと同様に使用します.
けんさ
単一FormControl
直接使用

control.markAsDirty();
control.updateValueAndValidity();

form検証全体
フォーム全体を個別に検証するプロセスであり、一般的にフォームのcontrols属性値を反復検証し、動的フォームにはネストされた論理を反復する必要がある場合があります.

outlayGroupSubmit(event) {
    if (!this.outlayGroup.valid) {
      const controls = this.outlayGroup.controls;
      for (const key in controls) {
        if (controls.hasOwnProperty(key)) {
          const formField = controls[key];
          formField.markAsDirty();
          formField.updateValueAndValidity();
        }
      }
      return;
    }
    // submit to ...
  }