在Angular 8中,formBuilder.group()
的确无法直接从@Input
获取数据。这是因为@Input
是用于组件之间的数据传递,而formBuilder.group()
是用于表单控件的数据绑定。
要解决这个问题,可以使用以下方法:
ngOnChanges
钩子监听@Input
属性的变化,并在属性变化时更新表单数据。import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent implements OnChanges {
@Input() inputData: any;
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
// 初始化表单控件
});
}
ngOnChanges(changes: SimpleChanges) {
if (changes.inputData && changes.inputData.currentValue) {
// 当inputData改变时更新表单数据
this.form.patchValue(changes.inputData.currentValue);
}
}
}
formBuilder.group()
创建表单,并将数据传递给子组件。import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
// 初始化表单控件
});
}
}
在这个示例中,父组件使用formBuilder.group()
创建表单,并将表单的值通过[inputData]
属性传递给子组件。子组件使用ngOnChanges
钩子监听inputData
属性的变化,并在变化时更新表单数据。
这样,子组件就可以通过formBuilder.group()
创建表单,并使用form.patchValue()
方法将父组件传递的数据填充到表单中。
上一篇:Angular 8中的动态复选框