无法将 formGroup 作为输入传递给组件[重复]

【问题标题】：Unable to pass formGroup as input to the component [duplicate]无法将 formGroup 作为输入传递给组件[重复]
【发布时间】：2019-06-08 11:01:25
【问题描述】：

我正在设计一个具有一些重复复杂逻辑的表单。我正在使用反应形式的方法。由于逻辑是重复的，我想为它创建一个组件。下面是来自父表单的调用。

<ms-diag [parentForm] = "SOForm"></ms-diag>

我将父表单作为输入传递给子组件。但我在子组件中收到undefined 作为输出

  @Input() parentForm : FormGroup;  

  constructor() {
   this.text = 'Hello World';
   console.log('New Value >>>>>>>>>>>>>>>>>>>>');
   console.log(this.parentForm);
  }

我错过了什么吗？

【问题讨论】：

您可以在 Input 中使用 setter，例如_parentForm:any;@Input set parentForm(value){this._parentForm=value;..here you have value..} //记住.html中的引用变量_parentForm，而不是parentForm

标签： angular typescript angular-reactive-forms angular-components

【解决方案1】：

@Input 属性在constructor 中不可用。它们在ngOnChanges 中可用。因此，将您的constructor 代码移动到ngOnChanges，它应该可以工作。像这样的：

@Input() parentForm: FormGroup;

constructor() {...}

ngOnChanges() {
  this.text = 'Hello World';
  console.log('New Value >>>>>>>>>>>>>>>>>>>>');
  console.log(this.parentForm);
}

PS：这绝不意味着您应该在ngOnChanges 中初始化您的组件属性。您应该在 ngOnInit 方法中执行此操作。

【讨论】：

我投了反对票，因为这个答案暗示 ngOnChanges 是 OP 应该移动他的初始化代码的地方。这是有风险的建议，并没有解释它将被执行多次或为什么。还有其他钩子可以用来初始化他的逻辑。所以这是误导。请更新答案，我会更正我的投票。
@cgTag，非常感谢您的反对和原因。真的很感激。我已经用评论更新了答案。希望能解决您的担忧。 :)