如何设置formArray的初始值？

Question

I need to set initial value formArray f0r my form. Check my code:

Html:

            <div class="form-row form-group ingredients-drop">
                <button class="button" (click)="addAlias()">Add ingredients</button>
                <label>Kolicina</label>
                <div *ngFor="let ingredient of ingredients.controls; let i=index">
                    <input class="select add-ingredients" type="text" [formControlName]="i">
                </div>
            </div>

TS:

  allRecepies: any[] = [];
  selectedMeal: any
  form: FormGroup;


  ngOnInit() {
    this.getAllRecepies();
  }
  onChange(event) {
    this.allRecepies.map(obj => {
      if (obj.id == event.target.value) {
        this.selectedMeal = Object.assign(obj);
        console.log(this.form.value);
      }
    })
    this.editCity();
  }
  getAllRecepies() {
    this.mealService.getRecepies().subscribe(
      data => {
        this.allRecepies = data;
      }
    )
  } 

  editCity() {
    this.form.patchValue({
      name: this.selectedMeal.name ? this.selectedMeal.name : null,
      description: this.selectedMeal.description ? this.selectedMeal.description : null,
      preparationTime: this.selectedMeal.preparationTime ? this.selectedMeal.preparationTime : null,
      pictureUrl: this.selectedMeal.pictureUrl ? this.selectedMeal.pictureUrl : null,
      ingredients: this.selectedMeal.ingredients ? this.addMealArr() : null
    }) 
  } 
  addMealArr() {
    if(this.selectedMeal) {
     let a = this.selectedMeal.ingredients.map(obj => { return obj });
     return a;
    }
  }

  createForm() {
    this.form = this.formBuilder.group({
      name: [null],
      description: [null],
      preparationTime: [null],
      pictureUrl: [''],
      ingredients: this.formBuilder.array([
        this.formBuilder.control(this.addMealArr())
      ])
    });
  }

  get ingredients() {
    return this.form.get('ingredients') as FormArray;
  }
  addAlias() {
    this.ingredients.push(this.formBuilder.control(''));
  }

This is maybe bad practice but I need tutorial for my problem or stackblitz or can anybody help me? I need to set initial value with patchValue if it possible? Or to use another method? I don't know just send me tutorial or change my code or set stackblitz? I need set initial values and add new row or delete existing..

Answer 1

Hey you can set initial values in FormGroup as below:

recipes = [
    {
        ingredients: [
            {name: 'Grapes', amount: 12},
            {name: 'Potato', amount: 12}
        ]
    },
    { 
        ingredients: [
            {name: 'Banana', amount: 12},
            {name: 'Orange', amount: 12}
        ]
    }
];
let recipeIngredients = new FormArray([]);
const recipe = this.recipes[0];

if (recipe["ingredients"]) {
    for (let ingredient of recipe.ingredients) {
    recipeIngredients.push(
        new FormGroup({
        name: new FormControl(ingredient.name, Validators.required),
        amount: new FormControl(ingredient.amount, [Validators.required])
        })
    );
    }
}
this.recipeForm = new FormGroup({
    ingredients: recipeIngredients
});

I have created working stackblitz example for the same demo