在 Angular 8 中将表单字段动态添加到反应式表单
Dynamically adding form fields to reactive forms in Angular 8
我在从数组填充表单域时遇到了一些问题。我最初的想法是将数组从单个组件输入到将处理表单的单个组件。而不是制作多种形式。但我似乎无法让它发挥作用。任何帮助,将不胜感激!我已经浏览了 Google/stack/medium,但似乎找不到任何东西。我在 plunkr 上做了一个例子。
https://stackblitz.com/edit/angular-t7hcq6
在ts文件中:
public demoForm: FormGroup;
public arrayItems: data = [];
private formFields = ["Sku", "Title"];
constructor(private _formBuilder: FormBuilder) {
this.demoForm = this._formBuilder.group({
demoArray: this._formBuilder.array([])
});
}
ngOnInit() {
this.formFields.map(field => {
this.arrayItems.push({ title: field });
this.demoArray.push(this._formBuilder.control(''));
});
}
get demoArray() {
return this.demoForm.get("demoArray") as FormArray;
}
在模板中:
<form [formGroup]="demoForm">
<div formArrayName="demoArray"
*ngFor="let arrayItem of arrayItems; let i=index">
<input type="checkbox"[formControl]="demoArray[i]">
<label>{{arrayItem.title}}</label>
</div>
</form>
谢谢你们。
像这样更改您的模板:
<form [formGroup]="demoForm">
<div formArrayName="demoArray"
*ngFor="let arrayItem of arrayItems; let i=index">
<input type="checkbox" [formControlName]="i"> <!-- this line -->
<label>{{arrayItem.title}}</label>
</div>
</form>
我在从数组填充表单域时遇到了一些问题。我最初的想法是将数组从单个组件输入到将处理表单的单个组件。而不是制作多种形式。但我似乎无法让它发挥作用。任何帮助,将不胜感激!我已经浏览了 Google/stack/medium,但似乎找不到任何东西。我在 plunkr 上做了一个例子。
https://stackblitz.com/edit/angular-t7hcq6
在ts文件中:
public demoForm: FormGroup;
public arrayItems: data = [];
private formFields = ["Sku", "Title"];
constructor(private _formBuilder: FormBuilder) {
this.demoForm = this._formBuilder.group({
demoArray: this._formBuilder.array([])
});
}
ngOnInit() {
this.formFields.map(field => {
this.arrayItems.push({ title: field });
this.demoArray.push(this._formBuilder.control(''));
});
}
get demoArray() {
return this.demoForm.get("demoArray") as FormArray;
}
在模板中:
<form [formGroup]="demoForm">
<div formArrayName="demoArray"
*ngFor="let arrayItem of arrayItems; let i=index">
<input type="checkbox"[formControl]="demoArray[i]">
<label>{{arrayItem.title}}</label>
</div>
</form>
谢谢你们。
像这样更改您的模板:
<form [formGroup]="demoForm">
<div formArrayName="demoArray"
*ngFor="let arrayItem of arrayItems; let i=index">
<input type="checkbox" [formControlName]="i"> <!-- this line -->
<label>{{arrayItem.title}}</label>
</div>
</form>