フォームを子コンポーネントに渡し、子コンポーネントのフォームを検証します

debugcn 投稿 Dev

ホイ趙

親コンポーネントに送信ボタンがあります。また、いくつかの子コンポーネントがあります。次に、検証に合格したら、ボタンを有効にして、フォームのすべての値をすべての子コンポーネントに保存します。親コンポーネントで、フォームグループを作成しました。

 public mainForm: FormGroup;

親コンポーネントのコンストラクターでは、

      constructor(private fb: FormBuilder) {
       this.mainForm = this.fb.group({
       child1Form: this.fb.group({
           projectName: [null, Validators.required],
           projectSource: [null, Validators.required]
       });
      });
     }

親htmlでは、フォームを子に渡します。

<div>
  <app-child1 [child1Form]="mainForm.controls['child1Form']"></app-child1>
</div>

子コンポーネントhtmlでは、コードは次のとおりです。

<form [formGroup]="child1Form">
   <div>
      <input [(ngModel)]="projectName" formControlName="projectName">
   </div>
   <div>
      <input [(ngModel)]="projectSource" formControlName="projectSource">
   </div>
</form>

子コンポーネントのtsファイルでは、親コンポーネントのフォームを使用します。

 @Input() child1Form: any;

私が欲しいのはngOnInit親コンポーネントの中にあります、フォームの検証をチェックしてください。

ngOnInit() {
   this.mainForm.statusChanges.subscribe(data => {
      const f = this.mainForm.controls['child1Form'];
      if(f.valid || f.dirth)
        // do something such as enable/disable the submit button
   });
}

しかし、私の質問はstatusChanges、子コンポーネントの入力コントロールのテキストを変更しても、コードが一部に到達しなかったことです。何かを入力すると、フォームの値またはステータスが変更され、検証を実行できると思います。

snsakib

この問題を段階的に解決してみましょう。

parent＆childコンポーネントを作成する
次のHTMLテンプレートをparent.component.htmlに追加します

<form>
  <app-child></app-child>
  <button>Submit</button>
</form>

次のHTMLテンプレートをchild.component.htmlに追加します

<form [formGroup]="child1Form">
  <div>
    <input type="text" formControlName="projectName" required>
  </div>
  <div>
    <input type="text" formControlName="projectSource" required>
  </div>
</form>

以下のためformGroupを作成child1Form中child.component.ts（私は「child1Form」「child.component.ts」で宣言したではない「parent.component.ts」内）

  child1Form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.child1Form = this.fb.group({
      projectName: ['', Validators.required],
      projectSource: ['', Validators.required]
    })
  }

次に、child.component.tsのstatusChanges値をサブスクライブして出力します。

  @Output() isChild1FormValid: EventEmitter<boolean> = new EventEmitter<boolean>();

  ngOnInit() {
    this.child1Form.statusChanges.subscribe(value => {
      if(value === 'VALID') {
        this.isChild1FormValid.emit(true);
      }
    });
  }

parent.component.htmlで出力された値をリッスンします

<form>
  <app-child (isChild1FormValid)="enableSubmitButton($event)"></app-child>
</form>

parent.component.ts内のプロパティに値を保持します

  isChild1FormValid: boolean;

  enableSubmitButton(isValid: boolean) {
    this.isChild1FormValid = isValid;
  }

isChild1FormValidプロパティがtrue（parent.component.html）の場合、送信ボタンを有効にします

<form>
  <button type="submit" [disabled]="!isChild1FormValid">Submit</button>
</form>

StackBlitzで完全に機能するデモ

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-11

コメントを追加

サインイン

分類Dev

Related 関連記事

記事