如果我们想在表单数组的输入框中显示来自JSON数据的值,我们可以通过以下方式实现:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([])
});
}
get items(): FormArray {
return this.myForm.get('items') as FormArray;
}
addItem(): void {
this.items.push(this.fb.group({
name: '',
quantity: ''
}));
}
removeItem(index: number): void {
this.items.removeAt(index);
}
}
在上面的代码中,我们使用formArrayName指令链接FormGroup中的FormArray,然后使用ngFor循环遍历FormGroup中的每一项。我们使用formGroupName指令来链接每个FormGroup,并使用formControlName指令将输入框绑定到FormGroup中的每个控件。最后,我们使用[value]属性将JSON数据中的值绑定到对应的表单控件上。
通过以上的方法,我们可以让
上一篇:表单数组不保存输入内容
下一篇:表单数组未保存输入