当一个新的 FormGroup 被添加到一个 FormArray 时，它是有效的，Reactive Form 说它是无效的

问题描述

我有用于创建具有三个控件的配方的反应式形式：

• 标题
• 由具有两个属性的成分组成的 FormGroup 的 FormArray
  • 成分名称
  • 收取的金额
• 步骤的 FormArray

我的问题是，每当我向 FormArray 添加 FormControl 或 FormGroup 时，即使我填写了所有字段，表单的状态也是无效的。如果表单无效，有一个提交按钮会被禁用。

我的代码：

<h1>Create a recipe</h1>

<form [formGroup]="recipe" (ngSubmit)="onSubmit()" autocomplete="off">
    <div>
        <mat-form-field appearance="outline" color="accent" hiderequiredMarker="true">
            <mat-label>Name</mat-label>
            <input formControlName="title" matInput required type="text" placeholder="ex. Oats Smoothie">
            <mat-error>Name is <strong>required</strong></mat-error>
        </mat-form-field>
    </div>
    <hr>
    <div formArrayName="ingredients">
        <div *ngFor="let control of ingredients.controls; index as i">
            <div [formGroupName]="i">
                <mat-form-field appearance="outline" color="accent" hiderequiredMarker="true">
                    <mat-label>Ingredient name</mat-label>
                    <input formControlName="name" matInput required placeholder="ex. Oats" type="text">
                    <mat-error>Ingredients are
                        <strong>required</strong>
                    </mat-error>
                </mat-form-field>
                <mat-form-field appearance="outline" color="accent" hiderequiredMarker="true">
                    <mat-label>Ingredient amount</mat-label>
                    <input formControlName="amount" matInput type="text" placeholder="ex. 1 cup">
                    <mat-error>Ingredients are
                        <strong>required</strong>
                    </mat-error>
                    <mat-icon matSuffix (click)="removeIngredient(i)" *ngIf="!(ingredients.controls.length == 1)">clear</mat-icon>
                </mat-form-field>
            </div>
        </div>
        <button type="button" mat-raised-button color="primary" (click)="addIngredient()">Add Ingredient</button>
    </div>
    <hr>
    <div formArrayName="steps">
        <mat-form-field *ngFor="let step of steps.controls; index as i" appearance="outline" color="accent"
            hiderequiredMarker="true">
            <mat-label>Steps</mat-label>
            <textarea [formControlName]="i" type="text" matInput placeholder="ex. Take Oats"
                cdkTextareaAutosize></textarea>
            <mat-icon matSuffix (click)="removeStep(i)" *ngIf="!(steps.controls.length == 1)">clear</mat-icon>
            <mat-error>Steps are <strong>required</strong></mat-error>
        </mat-form-field>
        <br>
        <button type="button" (click)="addStep()" mat-raised-button color="primary">Add Step</button>
    </div>
    <br>
    <button type="submit" [disabled]="!recipe.valid" mat-raised-button color="primary">Submit</button>
</form>

  recipe: FormGroup | any;
  constructor(private formBuilder: FormBuilder,private recipeService: RecipesService,private dialog: MatDialog,private router: Router) { }

  ngOnInit(): void {
    this.recipe = this.formBuilder.group({
      title: ['',Validators.required],ingredients: this.formBuilder.array([
        this.formBuilder.group({
          name: ['',amount: ['',Validators.required]
        })
      ]),steps: this.formBuilder.array([
        this.formBuilder.control('',Validators.required)
      ])
    });
  }

  onSubmit() {
    this.recipeService.createRecipe(this.recipe.value.title,this.recipe.value.ingredients,this.recipe.value.steps).subscribe();
  }

  get steps() {
    return this.recipe.get('steps') as FormArray;
  }

  addStep() {
    this.steps.push(this.formBuilder.control('',Validators.required));
  }

  get ingredients() {
    return this.recipe.get('ingredients') as FormArray;
  }

  addIngredient() {
    this.ingredients.push(this.formBuilder.group({ name: ['',Validators.required,Validators.pattern(/^\d\s?\w+/g)] }));
    this.recipe.valid = this.recipe.valid ? !this.recipe.valid : this.recipe.valid;
  }

解决方法

我通过在 this.recipe.updateValueAndValidity 和 addStep 函数中添加@Ashot 提到的 addIngredient 解决了这个问题