Angular 6: ERROR Error: Cannot find control with unspecified name attribute with angular material and reactive forms

Question

I have array of string from which I want to display it in textbox. I am using reactive forms. I know there are similar questions too. But I didn't get the solution. So I am posting this as a new question here.

ts file:

  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,
        }))
      });

  }

template file:

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

Data are displaying on textbox. But I am getting following error:

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)

Please help me out..

Sangwin Gawande · Accepted Answer · 2020-05-29 07:48:42Z

3

I notice that you are using the wrong syntax for reactive forms on your template.

For both inputs, you should be using the formControlName attribute, and assign them with the property name of its the Form Controls.

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

edited May 29, 2020 at 7:48

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

answered Jun 24, 2019 at 8:35

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6: ERROR Error: Cannot find control with unspecified name attribute with angular material and reactive forms

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related