私はAngular5を使用していて、フィールドのリストがあり、それぞれに名前とFormControlがあります。このコードを使用して、コントロールをグループに動的に追加しようとしましたが、エラーが発生しました。
const formControlFields = [
{name: 'field1',control: [null, []] as FormControl},
{name: 'field2',control: [null, []] as FormControl}
];
const formGroup: FormGroup = new FormGroup({});
formControlFields.forEach( f => formGroup.addControl(f.name,f.control));
this.form = new FormGroup({groups:formGroup});
これは私が得るエラーです:
エラーTypeError:control.setParentは関数ではありません
at FormGroup.registerControl (forms.js:4352) at FormGroup.addControl (forms.js:4372) at eval (trade-search.component.ts:142)
代わりにnew FormControl()
構文を使用すると、機能します。
ngOnInit() {
const formControlFields = [
{ name: 'field1', control: new FormControl(null, []) },
{ name: 'field2', control: new FormControl(null, []) }
];
const formGroup: FormGroup = new FormGroup({});
formControlFields.forEach(f => formGroup.addControl(f.name, f.control));
this.form = new FormGroup({ groups: formGroup });
console.log(this.form);
}
デモ: https://stackblitz.com/edit/angular-9vbsgf?file=src%2Fapp%2Fapp.component.ts
As演算子でキャストを使用すると、コントロールのformStateが渡されないか、正しく設定されないようです。
control: [null, []] as FormControl
ただし、FormControlコンストラクターに値を指定すると、問題が解決します。
ngOnInit() {
this.form = new FormGroup({
'field1': new FormControl(''),
'field1': new FormControl('')
}
console.log(this.form);
}