反应式表单和@Input

Question

我想用取自其他组件的值制作 Reactiev 表单。 要将数据传递给组件，我使用@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 中查看在 Input 中传递数据的表单。

有可能吗？我应该在哪里将数据传递给 Form？

新代码，根据您的提示：

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)
    }

  }

这个ngOnChanges 将跟踪dataToPass 对象有变化，但不是对象属性，您需要在每次更新任何属性时将绑定对象设置为新对象，以触发更改检测 来自父组件

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

demo ??

Answer 2

您可以将整个 FormGroup 作为输入传递，例如 @Input myForm: FormGroup，也可以传递一个包含所需数据的对象并将它们修补到您的表单中。

例如，假设下面的形式，

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

还有一个类似的对象

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

然后您可以将此对象传递给@Input @Input myData: {name:string,surname:string}; 然后像这样修补你的表单

this.myForm.patchValue(myData);