Angular 如何更新角形数组
我目前在我的角度反应式表单中使用一些表单数组,当我加载表单时用数据初始化这些表单数组。我想做的是重新加载/刷新一个表单数组,比如我的电子邮件,一个包含更新数据的表单数组 这就是我当前设置initila值的方式Angular 如何更新角形数组,angular,Angular,我目前在我的角度反应式表单中使用一些表单数组,当我加载表单时用数据初始化这些表单数组。我想做的是重新加载/刷新一个表单数组,比如我的电子邮件,一个包含更新数据的表单数组 这就是我当前设置initila值的方式 this.form = this.fb.group({ first_name: [this.formData && this.formData.first_name], middle_name: [this.formData && this.
this.form = this.fb.group({
first_name: [this.formData && this.formData.first_name],
middle_name: [this.formData && this.formData.middle_name],
last_name: [this.formData && this.formData.last_name],
phones: this.fb.array([...phones]),
emails: this.fb.array([...this.labeledEmailInputsOrNew(this.formData && this.formData.emails)]),
recurring_events: this.fb.array([...recurring_events]),
addresses: this.fb.array([...addresses]),
});
this.setInitials();
}
这是我如何为电子邮件创建表单数组的代码
createLabeledEmailInputs(inputs: IEmail[]): FormGroup[] {
return inputs.map(input => this.createLabeledEmailInput(input));
}
labeledEmailInputsOrNew(inputs: IEmail[] = []): FormGroup[] {
return inputs && inputs.length
? this.createLabeledEmailInputs(inputs)
: [this.createLabeledEmailInput()];
}
createLabeledEmailInput(data?: IEmail) {
return this.fb.group({
id: [data && data.id],
type: [data && data.type],
address: [data && data.address],
name: [data && data.name],
source: [data && data.source],
dflt: [data && data.dflt],
dnmm: [data && data.dnmm],
bounce: [data && data.bounce],
otherLabel: [data && data.otherLabel],
});
}
所以我的问题是,如何用新加载的数据替换该数组中的所有数据?您可以使用FormGroup.setValue方法
const form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
console.log(form.value); // {first: null, last: null}
form.setValue({first: 'Nancy', last: 'Drew'});
console.log(form.value); // {first: 'Nancy', last: 'Drew'}
或FormGroup.patchValue
formgroup.patchValue({name:’Mocrosoft’});
您可以通过调用
setValue
或patchValue
来更新FormArray:
updteLabeledEmailInput(data?: IEmail) {
return this.myForm.setValue([data && data.id,
data && data.type,
data && data.address,
data && data.name,
data && data.source,
data && data.dflt,
data && data.dnmm,
data && data.bounce,
data && data.otherLabel,
]);
}
setValue需要一个匹配整个结构或FormArray的数组,而patchValue可以获取数组的超集或子集。经过一些研究,我找到了适用于我的情况的答案,因为我有一个Form元素数组。因为我知道数组的索引,所以可以使用.at(index)来修补或设置值
this.emails.at(index).patchValue( {
id: ta.data.id,
type: ta.data.type,
address: ta.data.address,
name: ta.data.name,
source: ta.data.source,
dflt: ta.data.dflt,
dnmm: ta.data.dnmm,
bounce: ta.data.bounce,
otherLabel: ta.data.otherLabel
});
我有点明白这一点,但我如何修补特定的电子邮件。在我的例子中,我有一个表单组,它保存在我的例子中,例如电子邮件数组。因此,电子邮件数组中有多个数组。例如,假设有3个电子邮件地址,我的索引为2,那么问题是,我如何仅使用索引1修补数组