问题描述
如何在另一个表单数组中添加复选框数组? 我有一个非常简单的表单,其中包含一个数组(optGroup),其中包含一组复选框(选项)
这是 HTML
<form [formGroup]="form">
<h5>How many orders?</h5>
<input
formControlName="qtyTotal"
class=" "
type="number"
id="qtyTotal"
min="1"
[(ngModel)]="defaultQtyTotal"
/>
<div class="bordered" formArrayName="optGroup" *ngFor="let grp of optGroupFormArray.controls; let j = index">
{{optGroupData[j].name}}
<!-- <label
formArrayName="options"
*ngFor="let order of optionsFormArray.controls; let i = index"
>
<input type="checkBox" [formControlName]="i" />
{{optionsData[i].name}}
</label> -->
</div>
<label
formArrayName="options"
*ngFor="let order of optionsFormArray.controls; let i = index"
>
<input type="checkBox" [formControlName]="i" />
{{optionsData[i].name}}
</label>
<div *ngIf="!form.valid">At least one order must be selected</div>
<hr>
<button [disabled]="!form.valid" type="submit" (click)="submit(form.value)">
submit
</button>
<hr>
</form>
<pre> {{ form.value | json }} </pre>
这里是 TS
export class AppComponent {
form: FormGroup;
optGroupData = [];
optionsData = [];
defaultQtyTotal = 1;
get optGroupFormArray() {
return this.form.controls.optGroup as FormArray;
}
get optionsFormArray() {
return this.form.controls.options as FormArray;
}
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
qtyTotal: "",optGroup: new FormArray([]),options: new FormArray(
[],minSelectedCheckBoxes(1)
)
});
// async optGroup
of(this.getoptGroup()).subscribe(optGroup => {
this.optGroupData = optGroup;
this.addGroup();
});
// async options
of(this.getoptions()).subscribe(options => {
this.optionsData = options;
this.addCheckBoxes();
});
// synchronous options
// this.optionsData = this.getoptions();
// this.addCheckBoxes();
}
private addCheckBoxes() {
this.optionsData.forEach(() =>
this.optionsFormArray.push(new FormControl(false))
);
}
private addGroup() {
this.optGroupData.forEach(() =>
this.optGroupFormArray.push(new FormControl(false))
);
}
getoptGroup() {
return [
{ id: 100,name: "group 1" },{ id: 200,name: "group 2" },];
}
getoptions() {
return [
{ id: 100,name: "options 1" },name: "options 2" },{ id: 300,name: "options 3" },{ id: 400,name: "options 4" }
];
}
submit(formValues) {
const selectedOrderIds = this.form.value.options
.map((checked,i) => (checked ? this.optionsData[i].name : null))
.filter(v => v !== null);
console.log(selectedOrderIds);
// console.log( formValues);
}
}
完整的工作代码在这里:https://stackblitz.com/edit/save-checkboxes-array-with-inside-another-formarray
如果可能,我想实现这样的目标:
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)