如何在Angular 10的FormGroup中使用FormArray

问题描述

我正在创建一个包含普通输入和一组成分的表单。

用户在填写表格时必须能够自动添加配料。

这是我第一次使用FormArray创建表单并且卡住了。

在控制台上：

这是我尝试过的：

 export class RecipeAddComponent implements OnInit {
      recipe: IRecipe;
    
      recipeForm: FormGroup;
      ingredients: FormArray;
      
      ingredientForm: FormGroup;
      validationErrors: string[] = [];
    
      constructor(private recipeService: RecipeService,private fb: FormBuilder,private router: Router) {
    
         }
    
      ngOnInit(): void {
        this.intitializeRecipeForm();
      }
    
      intitializeRecipeForm() {
        this.recipeForm = this.fb.group({
          name: ['',Validators.required],preparationTime: ['',description: ['',ingredients: this.fb.array([this.createIngredient()])
        });
      }
    
    
      createIngredient(): FormGroup {
        return this.fb.group({
          name: '',amount: ''
        });
      }

  addRecipe() {
    this.recipeService.addNewRecipe(this.recipeForm.value).subscribe(response => {
      this.router.navigateByUrl('/recipes');
    },error => {
      this.validationErrors = error;
    })
  }
    
      addIngredient(): void {
        this.ingredients = this.recipeForm.get('ingredients') as FormArray;
        this.ingredients.push(this.createIngredient());
      }
      }

HTML

<div class="container">
    <form class="p-5 col-md-5 col-sm-8 formShadow" [formGroup]='recipeForm' (ngSubmit)="recipeForm.valid && addRecipe()"
        autocomplete="off">
        <p class="h4 mb-4">Add new recipe</p>
        <app-text-input [formControl]='recipeForm.controls["name"]' [label]='"Name"'></app-text-input>

        <app-text-input [formControl]='recipeForm.controls["preparationTime"]' [label]='"Preparation Time"'
            [type]='"number"'>
        </app-text-input>

        <app-text-input [formControl]='recipeForm.controls["description"]' [label]='"Description"'></app-text-input>

        <div class="form-group">
            <ng-container formArrayName="ingredients">
                <div *ngFor="let ingredient of ingredients.controls; index as i">
                  <ng-container [formGroupName]="i">
                    <input formControlName="name" class="form-control" />
                    <input formControlName="amount"  class="form-control" />
                  </ng-container>
                </div>
              </ng-container>
        </div>
        <div class="row mt-5" *ngIf="validationErrors.length > 0">
            <ul class="text-danger">
                <li *ngFor="let error of validationErrors">
                    {{error}}
                </li>
            </ul>
        </div>

        <div class="form-group text-center">
            <button [disabled]="!recipeForm.valid" class="btn btn-outline-dark mr-2" type="submit">Register</button>
            <button class="btn outline-light mr-2" (click)="cancel()">Cancel</button>
        </div>
    </form>
</div>

任何提示都会有所帮助。这是我第一次这样做。

解决方法

在这种情况下，您好像有一个父类别，并且可以有多个子类别，这些子类别可以称为子类别表单数组。根据用户要求，可以有任意数量的子类别。 因此，可以按以下方式设计表单组和表单数组：-

constructor(
    private formBuilder: FormBuilder
) { }

this.categoryForm = this.formBuilder.group({
   name: [undefined,[Validators.required]],image: [undefined,subCategories: this.formBuilder.array([

   ]),});

要按需添加新的子类别，您可以按照以下步骤操作

addNewFieldSubCat() {
    (<FormArray>this.categoryForm.get("subCategories")).push(this.formBuilder.group({
      name: [undefined,[]],}));
}

要删除现有的子类别行，您可以执行以下操作：-

public removeSubCategory(index) {
   (<FormArray>this.categoryForm.get("subCategories")).removeAt(index);
}