Angular - Populate form array input on edit

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

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

回答2:

It seems that you are binding your quantity field with ri.quantity so you have to pass this object in your edit function and change the value in the same object i.e. ri in your component ts file like,

edit(ri){
    ri.quantity=SOME_NEW_VALUE_HERE;
}

Updated, for adding selected attribute in options,

<option ... [selected]="ingredient.id==ri.ingredient">
   {{ingredient.name}}
</option>