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(stackblitz.com) for us to know what exactly you doing in .ts file — Payal2299
– Payal2299, Commented Aug 1, 2018 at 5:15
There are a lot of examples in web, the official docs, angular.io/guide/…, an e.g. with radio buttons stackoverflow.com/questions/51427333/…, ... — Eliseo
– Eliseo, Commented Aug 1, 2018 at 6:39

Vivek Doshi · Accepted Answer · 2018-08-02 11:41:17Z

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 2, 2018 at 11:41

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abhijit Over a year ago

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 Over a year ago

Please let me know solution.it's urgent

Vivek Doshi Over a year ago

@Abhijit , there is some issue with your form builder , and names.

Abhijit Over a year ago

Should names in form array be unique? If yes how should we name the fields in formArray

Abhijit Over a year ago

can you please help me

Rohan Kumar · Accepted Answer · 2018-08-01 12:22:56Z

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 1, 2018 at 12:22

answered Aug 1, 2018 at 5:09

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

9 Comments

Abhijit Over a year ago

Already in edit function I am creating and array editingredientsarray and passing it, and using it in view like - *ngFor="let ri of editingredientsarray;" <input type="text" class="form-control" formControlName="recipe_ingredient_quantity" [ngModel]="ri.quantity">

Rohan Kumar Over a year ago

try to remove the formControlName from the text field

Abhijit Over a year ago

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

Rohan Kumar Over a year ago

Where is your dropdown?

Abhijit Over a year ago

I have updated my question code."recipe_ingredient" is my dropdown

|

Collectives™ on Stack Overflow

Angular - Populate form array input on edit

2 Answers 2

5 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related