我找了很久也没找到我想做的事。我想添加具有角度 5 和反应形式的动态键/值。
当我单击“添加参数”按钮时,会动态出现 2 个输入。一个用于键,另一个用于值。
当我提交表格时,我想得到这个:
{ 设置 : { 键1:值1, 键2:值2... } }
这是我所做的:
我的组件:
constructor(
protected fb: FormBuilder,
) {
// form init
this.testForm = fb.group({
'name': fb.control('', [Validators.required]),
'desc': fb.control('', [Validators.required]),
'config': fb.array([])
});
}
...
getControls(frmGrp: FormGroup, key: string) {
return (<FormArray>frmGrp.controls[key]).controls;
}
addConfigBlock() {
let settingBlock = this.testForm.get('setting') as FormArray;
settingBlock.push(this.fb.group({key: '', value: ''}));
}
模板.html
<div fxLayout="column" fxflex="100%" class="form-standard">
<div formArrayName="config" *ngFor="let setting of getControls(testForm, 'config'); let i = index;">
<div [formGroupName]="i" fxLayout="column" fxFlex="100%">
<mat-form-field class="form-input">
<input matInput formControlName="key" name="key" maxlength="255"
placeholder="Key" required>
</mat-form-field>
<mat-form-field class="form-input">
<input matInput formControlName="value" name="value" maxlength="255"
placeholder="Value" required>
</mat-form-field>
</div>
</div>
</div>
<mat-card-content class="mat-card-content">
<div fxLayout="row" fxLayoutAlign="start stretch" class="form-standard">
<div fxFlex.gt-md="100" fxFlex.xs="100">
<div fxLayoutAlign="space-around stretch">
<button type="button" mat-raised-button color="primary" (click)="addSetting()">Add setting</button>
</div>
</div>
</div>
</mat-card-content>
我不知道实现这一目标的最佳方法是什么。非常感谢:)
我的看法是,在组件中使用一个变量来跟踪索引,在每次添加时递增该变量。然后在表单控件的命名中使用该值,就像......
i = 0;
addConfigBlock() {
let settingBlock = this.testForm.get('config') as FormArray;
settingBlock.push(this.fb.group({['key'+this.i] : '', ['value'+this.i]: '' }));
this.i++;
}
并在模板中标记表单控件
formControlName="key{{i}}"
formControlName="value{{i}}"
其中
i
是迭代中的索引。
这是一个
我当时的情况是,我想动态添加一个控件,但又确切地知道我想添加哪个控件。出现这种情况是因为我想将所有控制值保存在后端的数组中,而不是单独列出它们。这里有一个解决方案:
<form [formGroup]="myForm">
<div formArrayName="myArray">
<div [formGroup]="getControl('my_known_control_name')">
<mat-checkbox formControlName="value">My known control name</mat-checkbox>
</div>
<div [formGroup]="getControl('my_second_known_control_name')">
<mat-checkbox formControlName="value">My second known control name</mat-checkbox>
</div>
</div>
</form>
// reactive device form
myForm!: FormGroup = this.fb.group({
myArray: this.fb.array([]),
});
constructor(private fb: FormBuilder) {}
getControl(field: string): FormGroup {
var myArray = this.myForm.get('myArray') as FormArray | null;
var existingControl = myArray?.controls.find(c => c.value["name"] === field);
if (existingControl) {
return existingControl as FormGroup;
} else {
var newControl = this.fb.group({
name: field,
value: undefined,
});
myArray?.push(newControl);
return newControl;
}
}