Angular - Populate form array input on edit

Question

I have a quantity field and an "Add" button. On click of button new fields for quantity gets added as well as Delete button to remove it. I have used Form array for it

My code is as below

<div formArrayName="ingredients11">
 <!-- loop throught units -->
 <div *ngFor="let unit of recipeForm['controls'].ingredients11['controls']; let i = index ">
  <div [formGroupName]="i">
   <div class="form-group">
    <label>Quantity</label>
    <input type="text" class="form-control" formControlName="recipe_ingredient_quantity">
    <div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
     <div *ngIf="unit['controls'].recipe_ingredient.errors.required">
      Quantity is required.
     </div>
    </div>
   </div>
   <button class="btn btn-danger" *ngIf="recipeForm['controls'].ingredients11['controls'].length > 1" (click)="remove(i)">Delete</button>
  </div>
 </div>
 <button class="btn btn-primary" (click)="add()">Add</button>
</div>

I also have an edit functionality, where I want to pre-populate the number of quantity fields and their values saved previously for edit

My code is as below:

<div formArrayName="ingredients11">
  <!-- loop throught units -->
  <div *ngFor="let unit of editrecipeForm['controls'].ingredients11['controls']; let i = index ">
   <!-- row divider show for every nex row exclude if first row -->
   <div *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1 && i > 0" ><hr></div>
   <div [formGroupName]="i" *ngFor="let ri of editingredientsarray;">
    <div class="form-group">
     <label>Ingredients</label>
     <select class="form-control" formControlName="recipe_ingredient" >
      <option value="">Select Ingredient</option>
      <option *ngFor="let ingredient of ingredients | async" [value]="ingredient.id">
       {{ingredient.name}}
      </option>
     </select>
     <div *ngIf="unit['controls'].recipe_ingredient.invalid" class="alert alert-danger">
      <div *ngIf="unit['controls'].recipe_ingredient.errors.required">
       Ingredient is required.
      </div>
     </div>
    </div>
    <div class="form-group">
     <label>Quantity</label>
     <input type="text" class="form-control" formControlName="recipe_ingredient_quantity" [value]="ri.quantity">
     <div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
      <div *ngIf="unit['controls'].recipe_ingredient.errors.required">
       Quantity is required.
      </div>
     </div>
    </div>
    <button class="btn btn-danger" *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1" (click)="removeEditIngredient(i)(i)">Delete Ingredient</button>
   </div>
  </div>
  <button class="btn btn-primary" (click)="addEditIngredient()">Add New Ingredient</button>
 </div>

But the value is not populating in input field. Can anyone please guide

Answer 1

Your state is configured wrongly :

export const Users = [
  {
      "id": "1",
      "name": "aaa",
      "technology": "1" //<------ Use id instead of names
  },
  {
      "id": "2",
      "name": "bbb",
      "technology": "1,2" //<------ Use id instead of names
  },
  {
      "id": "3",
      "name": "ccc",
      "technology": "1,3" //<------ Use id instead of names
  }
]

Working Demo