CODEWITHSUNDEEP
angular
Sercan Noyan Germiyanoğlu
Sercan Noyan Germiyanoğlu

Reputation: 2731

Cannot find control with name

I devised a form array in the dix setion shown below.

<div class="row">
        <div class="col-xs-12" formArrayName="ingredients">
          <div class="row"
            *ngFor="let ingredientCtrl of getControls(); let i = index"
            [formGroupName]="i" style="margin-top: 10px;">
              <div class="col-xs-8">
                <input type="text"
                formControlName="name"
                class="form-control">
              </div>
              <div class="col-xs-2">
                <input type="number"
                formControlName="amount"
                class="form-control">
              </div>
              <div class="col-xs-2">
                <button type="button" class="btn btn-danger">X</button>
              </div>
          </div>
        </div>
      </div>

Typescript part

let recipeIngredients = new FormArray([]);

 if (recipe['ingredients']) {
        for (let ingredient of recipe.ingredients) {
          recipeIngredients.push(
            new FormGroup({
              name: new FormControl(ingredient.name),
              amount: new FormControl(ingredient.amount)
            })
          );
        }
      }

getControls() {
  return (this.recipeForm.get('ingredients') as FormArray).controls;
}

In the typescript part I have a problem about variables named for recipeIngredients and ingredient.

[tslint] Identifier 'recipeIngredients' is never reassigned; use 'const' instead of 'let'. (prefer-const)
[tslint] Identifier 'ingredient' is never reassigned; use 'const' instead of 'let'. (prefer-const)

I tried to get values from ingredients and set them into the input fields but there is an error thrown like this. 

ERROR Error: Cannot find control with name: 'ingredients'

How can I fix it?

Upvotes: 0

Views: 3080

Answers (1)

Lia
Lia

Reputation: 11982

Your should add main formGroup in template and then formArrayName of it and then formGroupName of each formArray item, form should be:

ngOnInit(){
    this.recipeForm = new FormGroup({
      'ingredients':new FormArray([])
    });

    let recipeIngredients = new FormArray([]);
    let recipe = {
      ingredients : [{name: 'sdfsdf', amount: 2121}]
    }

    if (recipe['ingredients']) {
        for (let ingredient of recipe.ingredients) {  
          (<FormArray>this.recipeForm.get('ingredients')).push(
            new FormGroup({
              name: new FormControl(ingredient.name),
              amount: new FormControl(ingredient.amount)
            })
          );
        }
      }
  }

  getControls() {
    console.log( (this.recipeForm.get('ingredients') as FormArray).controls)
  return (this.recipeForm.get('ingredients') as FormArray).controls;
}

html:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
            <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
                <div formArrayName="ingredients">
          <div class="row" *ngFor="let ingredientCtrl of getControls(); let i = index" [formGroupName]="i"
                    style="margin-top: 10px;">
                    <div class="col-xs-8">
                        <input type="text" formControlName="name" class="form-control">
          </div>
          <div class="col-xs-2">
            <input type="number" formControlName="amount" class="form-control">
          </div>
          <div class="col-xs-2">
            <button type="button" class="btn btn-danger">X</button>
          </div>
                </div>
        </div>
            </form>
        </div>
    </div>
</div>

DEMO 🚀🚀

Upvotes: 2

Related Questions