Я использую Angular 8 с реактивными формами. Одним из полей формы является FormArray, который добавляет элементы управления, когда пользователь нажимает кнопку «Добавить». - PullRequest
Новая
       10

Я использую Angular 8 с реактивными формами. Одним из полей формы является FormArray, который добавляет элементы управления, когда пользователь нажимает кнопку «Добавить».

0 голосов
/ 29 января 2020

Я использую Angular 8 с реактивными формами. Одним из полей формы является FormArray, который добавляет элементы управления, когда пользователь нажимает кнопку «Добавить». Когда я добавил элементы управления, я получил последний добавленный элемент в массиве, который по-прежнему связан с вводом данных. 

private initForm(){
    this.ingredients = this.recipeService.getIngredientList();
    this.recipeForm = this.formBuilder.group({
      name: [''],
      imagePath: [''],
      description: [''],
      category: [''],
      recipeIngredients: this.formBuilder.array([
        this.initIngredients()        
      ])        
    });
  }
  removeFormControl(i){
    let userArray= this.recipeForm.controls.recipeIngredients as FormArray;
    userArray.removeAt(i);
  }

  addFormControl(){
    const control = <FormArray>this.recipeForm.controls['recipeIngredients'];
    control.push(this.initIngredients())

  }

  initIngredients(){
    return this.formBuilder.group({
      ingredientID: new FormControl(),
      quantity: new FormControl(),
      quantity_unit: new FormControl()
    });


<div class="form-row" >
        <div formArrayName="recipeIngredients">
          <ng-container *ngFor="let irecipe of recipeForm.controls.recipeIngredients.controls; let i=index">
            <div [formGroupName]="i">
              <div class="form-group col-md-4">
                <mat-form-field >
                  <mat-label>Select Ingredient</mat-label>
                  <mat-select formControlName="ingredientID" id="ingredientID" [(ngModel)]="ingredientRecipe.IngredientID">
                    <mat-option  *ngFor="let ing of ingredients | async" [value]="ing.Name" value="ing.Name">{{ing.Name}}</mat-option>              
                  </mat-select>
                </mat-form-field>
              </div>
              <div class="form-group col-md-4">
                <label for="inputEmail4">Quantity</label>
                <input  formControlName="quantity" type="number" [(ngModel)]="ingredientRecipe.Quantity" name="quantity" class="form-control" id="inputEmail4" placeholder="Quantity">
            </div> 
              <div class="form-group col-md-4">
                <mat-form-field>
                <mat-label>Select Unity</mat-label>
                  <mat-select formControlName="quantity_unit" >
                    <mat-option>Kilos</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <button mat-raised-button color="primary" (click)="removeFormControl(i)">Remove Ingredient</button>
            </div>
          </ng-container>
        </div>
      </div>
...