我有一个要在文本框中显示的字符串数组。我正在使用反应形式。我知道也有类似的问题。但是我没有解决方案。因此,我将其作为新问题发布在这里。
ts文件:
ngOnInit() {
if(this.data.data && this.data.data.length) {
this.orderForm = this.formBuilder.group({
items: this.formBuilder.array([ ])
})
this.setCheckBoxValue();
}
this.blankForm = this.formBuilder.group({
blankItems: this.formBuilder.array([])
})
}
setCheckBoxValue() {
this.items = this.orderForm.get('items') as FormArray;
this.data.data.forEach((element) => {
this.items.push(this.formBuilder.group({
checked: element,
selected: true,
}))
});
}
模板文件:
<div *ngIf="data.data.length" [formGroup]="orderForm">
<div formArrayName="items" *ngFor="let item of orderForm.get('items').controls;let i=index">
<div class="row" [formGroupName]="i">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-checkbox [formControl]="item.selected" class="ml-a" [checked]="item.controls.selected.value" >
</mat-checkbox>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<mat-form-field
floatPlaceholder="never" class="margin-top-25px example-full-width" >
<input
matInput
class="input"
[formControl]="item.checked"
value="{{item.controls.checked.value}}"
placeholder="{{data.title}}"
>
</mat-form-field>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" *ngIf="data.title == 'Work Method'">
<mat-form-field class="example-full-width margin-top-25px">
<input
type="number"
class="input-price"
[formControl]="item.price"
value="{{item.controls.price.value}}"
placeholder="price"
matInput >
</mat-form-field>
</div>
</div>
</div>
</div>
数据显示在文本框中。但是我遇到以下错误:
ERROR Error: Cannot find control with unspecified name attribute
at _throwError (forms.js:2432)
at setUpControl (forms.js:2300)
at FormControlDirective.push../node_modules/@angular/forms/esm5/forms.js.FormControlDirective.ngOnChanges (forms.js:6461)
at checkAndUpdateDirectiveInline (core.js:12407)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)
at Object.eval [as updateDirectives] (ModalDialogComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
请帮帮我。.
答案 0 :(得分:1)
我注意到您对模板上的反应形式使用了错误的语法。
对于两个输入,您都应该使用formControlname
属性,并为其分配其表单控件的属性名称。
<input
matInput
class="input"
formControlName="checked"
value="{{item.controls.checked.value}}"
placeholder="{{data.title}}"
>
<input
type="number"
class="input-price"
formControlName="price"
value="{{item.controls.price.value}}"
placeholder="price"
matInput
>