如何在响应式表单中设置一个特定字段的值，当它是一个对象数组?

Question

我有一个动态字段正在生成，长度可以是n个数字。我想从TS中设置一个特定字段的值。

我的表单初始化如下:

this.Form = this.fb.group({
dynamics: this.fb.array([]),
});

我的Json看起来像:

{ "dynamics": 
[ { "field": "Country", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:11:57.965Z" }, 
{ "field": "", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:19:18.835Z" } ] 
}

我想设置"value">

我尝试了this.Form.get('dynamics')[0].get('value').setValue(result);，但没有工作。

我如何访问动态数组中的元素，然后设置值?

提前感谢。

Answer 1

为了清楚起见，我将首先创建一个getter:

get dynamics(): FormArray {
return this.Form.get('dynamics') as FormArray;
}

然后你想用at和patchValue:

this.dynamics.at(0).patchValue({value: result})

使用setValue，您必须为表单数组对象的所有属性设置值。patchValue允许您只打一个或多个补丁。

Answer 2

您可以通过使用索引轻松地在html中设置值。使用value标签并在html中设置值，如下所示。

<div formArrayName="dynamic" *ngFor="let dynamic of dynamics.controls; let i = index;">
<div class="form-group col-md-2">
<label>Value</label>
<!-- Use the value tag, and set the value in your form-->
<select   [value]="dynamics.at(i).controls.dynamic.value" formControlName="value">
</select>
</div>
</div>