问题描述
我想在 formArray 中获取我的简单表单上的值,但它给了我错误。我尝试过其他解决方案,例如 Bootstap 5 Tooltips Markup,但它不起作用。
----- HTML
<div class="form-group" formArrayName="optionGroup">
<div *ngFor="let data of menuOptions; let i = index">
<div [formGroupName]="i" class=" " id="{{i}}">
<input
formControlName="optionsQty"
class="form-input qty qty{{i}}"
type="number"
id="qty{{i}}"
min="1"
[(ngModel)]="defaultOptionQtyTotal"
/>
<input
formControlName="optionsName"
class="form-input"
type="text"
readonly
value=" {{data.name}} {{i}}"
id="optName{{i}}"
/>
$<input
formControlName="optionsCost"
class="form-input"
type="text"
readonly
value=" {{data.cost}}"
id="optName{{i}}"
/>
</div>
</div>
这里是 .TS
----- TS
constructor(private builder: FormBuilder) {
this.form = this.builder.group({
qtyTotal: this.builder.control("",[
Validators.required,Validators.min(1)
]),optionGroup: this.builder.array([]);
});
} //end constructor
解决方法
您可以在类中初始化表单数组。
ngOnInit() {
this.initFormArray();
}
initFormArray() {
this.menuOptions.forEach(x => {
(<FormArray>this.form.get("optionGroup")).push(
this.builder.group({
optionsQty: [null],optionsName: [x.name],optionsCost: [x.cost]
})
);
});
}
您遇到问题,因为您尝试访问 HTML 中的空表单数组。