反應式 Forms 和 @Input

Question

我想用取自其他組件的值制作 Reactiev Form。 要將數據傳遞給組件，我使用@Input。

例如：

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  ...
})
export class GetData implements OnInit {
  @Input() dataToPass: DataOne;
  myForm: FormGroup;

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
... }
}

我想在 HTML 中查看在輸入中傳遞數據的表單。

可能嗎？ 我應該在哪里將數據傳遞給表單？

新代碼，根據您的提示：

ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

    if (changes['this.dataToPass'] && changes['this.dataToPass'].currentValue) {
      console.log('change');
    }

    if (changes['this.dataToPass'].firstChange === true) {
      console.log('Change is seen');
    }
}

第一個條件不成立。 第二個，我收到錯誤：錯誤類型錯誤：無法讀取未定義的屬性“firstChange”。

下一個代碼：

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass.firstName);
}

我得到的是：“錯誤類型錯誤：無法讀取未定義的屬性 firstName。”

看起來輸入發生在此類更改之后。

下一個代碼：

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass);
}

不幸的是，我得到了一個未定義的信息。 所以它不能正常工作。

Answer 1

你可以使用這些方法patchValue , setValue , reset

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
     ... 
    });

   this.myForm.patchValue(this.dataToPass);

}

如果您不將數據傳遞給所有控件，則使用 patchValue 或 reset 方法不會引發錯誤

更新！！ ⚡⚡

  ngOnChanges(changes: SimpleChanges) {

    if (changes.dataToPass && changes.dataToPass.currentValue){
      this.myForm.patchValue(changes.dataToPass.currentValue)
    }

  }

this ngOnChanges will keep track of the dataToPass object has changes, but not object properties, you need to set the binding object to new object every time you update any proprty,to trigger change detection from parent component

this.userData = {...this.userData};

演示

Answer 2

您可以將整個 FormGroup 作為輸入傳遞，例如@Input myForm: FormGroup ，也可以傳遞包含所需數據的 object 並將它們修補到表單中。

例如，讓我們假設下面的形式，

this.myForm = this.fb.group({
    name: ['', [Validators.required]],
    surname: ['', [Validators.required]],
    age: ['', [Validators.required]],
       ...
   })

和 Object 之類的

{
  name: 'John',
  surname: 'Black'
}

然后，您可以將此 object 傳遞給 @Input @Input myData: {name:string,surname:string}; 然后像這樣修補你的表單

this.myForm.patchValue(myData);