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

It looks like binding issue.That will be great if you can create field(https://stackblitz.com) for us to know what exactly you doing in .ts file — Payal2299, Aug 01 '18 at 05:15
There are a lot of examples in web, the official docs, https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays, an e.g. with radio buttons https://stackoverflow.com/questions/51427333/angular-formarray-radio-buttons/51427819#51427819, ... — Eliseo, Aug 01 '18 at 06:39

score 1 · Accepted Answer · answered Aug 02 '18 at 11:41

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

answered Aug 02 '18 at 11:41

Vivek Doshi

56,649
12
110
122

in the working demo tech 3 is selected in both drop downs, but for first it should be tech 1. Please provide solution for this – Abhijit Aug 02 '18 at 12:50
Please let me know solution.it's urgent – Abhijit Aug 03 '18 at 03:59
@Abhijit , there is some issue with your form builder , and names. – Vivek Doshi Aug 03 '18 at 04:06
Should names in form array be unique? If yes how should we name the fields in formArray – Abhijit Aug 03 '18 at 04:16
can you please help me – Abhijit Aug 03 '18 at 09:43

Rohan Kumar · Answer 2 · 2018-08-01T12:22:56.767

0

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>

edited Aug 01 '18 at 12:22

answered Aug 01 '18 at 05:09

Rohan Kumar

40,431
11
76
106

Already in edit function I am creating and array editingredientsarray and passing it, and using it in view like - *ngFor="let ri of editingredientsarray;" – Abhijit Aug 01 '18 at 05:18
try to remove the formControlName from the text field – Rohan Kumar Aug 01 '18 at 05:20
I have figured it out. We can use [value] = "ri.quantity" instead of [ngModel]="ri.quantity" Can anyone help with showing the selected value of Ingredient dropdown if it matches ri.ingredient – Abhijit Aug 01 '18 at 11:57
Where is your dropdown? – Rohan Kumar Aug 01 '18 at 12:08
I have updated my question code."recipe_ingredient" is my dropdown – Abhijit Aug 01 '18 at 12:14
I have updated my answer. I was just curious to know about your project. Is this like recipes site? – Rohan Kumar Aug 01 '18 at 12:17
change `=` to `==` in the selected condition and try. – Rohan Kumar Aug 01 '18 at 12:23
Make sure you are having a value in `ri.ingredient`. – Rohan Kumar Aug 01 '18 at 12:31
I have value in ri.ingredient. example: 1 – Abhijit Aug 01 '18 at 12:35

Angular - Populate form array input on edit

2 Answers2

Linked