要使用数组的值来更新Angular响应式表单控件,可以按照以下步骤操作:
values = ['Value 1', 'Value 2', 'Value 3'];
FormGroup
对象,用于表示响应式表单。import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
values: this.formBuilder.array([])
});
// 根据数组中的值创建初始表单控件
this.values.forEach(value => {
this.addValue(value);
});
}
get valueControls() {
return this.myForm.get('values') as FormArray;
}
addValue(value: string) {
const control = this.formBuilder.control(value);
this.valueControls.push(control);
}
}
*ngFor
指令循环遍历表单控件,并将数组的值绑定到每个控件。
这样,就可以使用数组的值来更新表单控件了。当数组中的值发生变化时,表单控件的值也会随之更新。