角度6:错误错误:找不到具有角度材料和反应形式的未指定名称属性的控件

时间:2019-06-24 08:10:18

标签: angular angular-material angular6 reactive-forms

我有一个要在文本框中显示的字符串数组。我正在使用反应形式。我知道也有类似的问题。但是我没有解决方案。因此,我将其作为新问题发布在这里。

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)

请帮帮我。.

1 个答案:

答案 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 
>