如何使用angular8将对象的动态数组分配给formgroup

Question

Hi我从API命中中获取对象数组，该对象数组必须分配给formGroup。我试过使用formGroup绑定，但它检测true/false值，但它不会在对象数组中给我更改后的true/false数值，而是只给我true/false，而且我在另一个数组中也有日期输入字段，它不会检测true/false值或更改后的值。如果我写的代码是错误的，那么请纠正我，并帮助我以有效的方式写作。

感谢您的帮助。

演示：演示

TS:

private settingsInfoForm() {
if (!this.agentDetailsList) {
// Add
this.agentSettingsInfoForm = this.FB.group({
agentToogles: this.FB.array(this.detailsToggle.map(x=> x.boolValue)),
restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
});
} else {
// Edit
if (this.agentDetailsList) {
this.detailsToggle = this.agentDetailsList
this.agentSettingsInfoForm = this.FB.group({
agentToogles: this.FB.array(this.detailsToggle.map(x=>x.boolValue)),
restrictionsInfo:this.FB.array(this.Restrictions.map(x=>x.boolValue))
})
}
this.agentSettingsInfoForm.valueChanges.subscribe(data => {
this.formEdit = true;
console.log('agentSettingsInfoForm', this.formEdit)
})
}
}

HTML:

<form [formGroup]= "agentSettingsInfoForm">
<div class="row row-cols-2" formGroupName="agentToogles">
<div class="col" *ngFor="let toggleValue of detailsToggle;let i = index">
<div class="custom-control custom-switch mb-3">
<input type="checkbox" [formControlName]="i" id="{{toggleValue.id}}" > 
<label class="custom-control-label" for="{{toggleValue.id}}">{{toggleValue.label}}</label>
</div>
</div>
</div>

<div class="col-6 {{isReadOnly ? 'link-disabled' : ''}}"
*ngFor="let restrictValue of Restrictions;let i = index" formGroupName="restrictionsInfo">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="{{restrictValue.id}}"
[(ngModel)]="restrictValue.boolValue" [ngModelOptions]="{standalone: true}"
>
<label class="custom-control-label" for="{{restrictValue.id}}">{{restrictValue.label}}</label>
</div>
<div class="form-group">
<input type="text" class="form-control restrictionDate" id="{{restrictValue.id}}" placeholder="MM/DD/YYYY HH:MM AM/PM"
[disabled]="!restrictValue.boolValue" [(ngModel)]="restrictValue.datetime" (click)="dateRestriction($event, i)" 
[ngModelOptions]="{standalone: true}" >
</div>
</div>
</form>

Answer 1

使用表单生成器时不使用[(ngModel)]。相反，您应该使用formControlName指令。当您使用表单生成器数组时，还应该使用formArrayName指令。

此外，您需要将控件数组传递给窗体生成器，而不是值数组。

我将根据您的代码创建一个简单的示例，向您展示如何应用该技术。

如果你在你的组件中设置了这样一个表单：

组件.ts

ngOnInit() {
this.values = ['', '', ''];
this.form = this.formBuilder.group({
values: this.formBuilder.array(
// this is an array of controls - NOT values
this.values.map(x => this.formBuilder.control(x))
)
});
}

您可以在HTML中使用如下指令：

component.html

<form (submit)="onSubmit()">
<fieldset [formGroup]="form">
<div formArrayName="values">
<div *ngFor="let value of values;let i = index">
<input [formControlName]="i" />
</div>
</div>
<button>Submit</button>
</fieldset>
</form>

注意我是如何用formArrayName指令包装表单控件的，并将formControlName设置为数组索引。

演示：https://stackblitz.com/edit/angular-lbo6qn

数组中的多个窗体控件

如果要为表单数组中的每个项创建多个控件，则需要设置表单以反映这一点。为表单数组中的每个属性创建一个表单控件。

this.form = this.FB.group({
array: this.FB.array(
this.values.map(x => this.FB.group({
boolValue: this.FB.control(x.boolValue),
label: this.FB.control(x.label)
}))
)
});

然后，您的HTML结构与表单结构匹配：

<form [formGroup]="form" (submit)="onSubmit()">
<div formArrayName="array">
<div *ngFor="let value of values;let i = index">
<div [formGroupName]="i">        
<input type="checkbox" formControlName="boolValue" /> 
<input type="text" formControlName="label" />
</div>
</div>
</div>      
<button>Save</button>
</form>

然后，您可以在提交时访问更新后的值。同样，您的查询与声明的结构匹配。

onSubmit() {
this.form.get('array').value.forEach((formGroup: FormGroup, i: number) => {
this.values[i].boolValue = formGroup['boolValue'];
this.values[i].label = formGroup['label'];
});
}

这里的关键是HTML中表单指令的结构应该与表单中的表单生成器组、数组和控件的结构相匹配

分叉演示：https://stackblitz.com/edit/angular-xopwoz

这只是你如何应用这个概念的一个例子，而不是你的问题的具体解决方案。您的问题使用日期字段和jQuery。如何在Angular中创建日期选择器输入字段的问题已经超出了范围，并且在互联网上被广泛提出。对您来说，将我的技术应用于您的代码库应该不会有太大问题。