CODEWITHSUNDEEP
angularangular-materialangular6angular-reactive-forms
Jayna Tanawala
Jayna Tanawala

Reputation: 493

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

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

Upvotes: 2

Views: 6439

Answers (1)

wentjun
wentjun

Reputation: 42516

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 
>

Upvotes: 3

Related Questions