如何将一组项设置为响应式formcontrolName

Question

我在做一个angular应用。

我有一个反应形式，定义为

form!: FormGroup<GlobalBean>

在globalBean中，我有另一个bean

的数组

export interface globalBean{
/**
* Version Clé
*/
terms: AnotherBean[];

在前面的形式为@Input的组件中，我有以下模板

<div *ngFor="let term of ######; let index = index;">
<mat-form-field>
<mat-label>{{term.property1}}</mat-label>
<mat-select [formControl]="form"
[formControlName]="######"
[(value)]="term.property2">
<mat-option *ngFor="let ta of list2"
[value]="ta.valeur">{{ ta.libelle }}</mat-option>
</mat-select>
</mat-form-field>
</div>

我不知道如何定义######在以下两个表达式:

1. <<
2. ><<
3. ><</li> <</li>>
4. [formControlName] ="# # # # # #">

Answer 1

你可以试试下面的网站作为参考

https://angular.io/guide/dynamic-form

https://medium.com/@krishnaregmi how-to-create-dynamic-forms-in-angular-7-using-formcontrol-a443a2c5e3a9

的例子:

如果你有n个元素像formValues =[{标签:"a",值:' a '},{标签:"b",值:' b '},{标签:"c",值:' c '})

你需要用第一个 创建你的formGroup

form: FormGroup;
formValues = [{label: 'a',value:'a'},{label: 'b',value:'b'},{label: 'c',value:'c'}]
toFormGroup(arr:any) {
let group={};
arr.forEach((x) => {
group[x.label]=new FormControl(x.value);
});        
this.form = new FormGroup(group);
}

这将创建一个包含动态密钥的表单组

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let element of formValues ">
<input type="text" formControlName="{{element.label}}" value="{{element.value}}"/>
</div>  
<input type="submit" value="save"/>
</form>

我想这会对你有帮助。