在 Reactive Form 上制作 FormArray 控件

Question

我正在尝试在响应式表单上创建必需的表单字段，但该表单始终有效，我希望它在两个字段都不为空之前无效。

https://stackblitz.com/edit/angular-ivy-y4jby5?file=src/app/app.component.html

import { Component, VERSION, OnInit } from "@angular/core";
import {Form, FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;
  testForm = this.fb.group({
    questions: this.fb.array([
      this.fb.group(
        [{testString: ['']}, Validators.required],
        [{testString: ['']}, Validators.required]
      )
    ])
  });
  
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const control = this.testForm.get('questions') as FormArray;
    control.push(this.fb.group(
      {
        testString: ['']
      }, Validators.required)
    )
  }

  get questionControls() {
     return this.testForm.get('questions') as FormArray;
  }
}

<form [formGroup]="testForm">
    <ng-container formArrayName="questions">
        <ng-container *ngFor="let question of questionControls.controls; let i = index">
            <input type="text" [formGroupName]="i">
        </ng-container>
    </ng-container>
</form>
Is Form Valid: {{ testForm.valid }}

Answer 1

FormBuilder group 方法期望 controlConfig 作为键值对，其中键是 FormControl 的名称，值是控件的配置。

在您的示例中，您将无效的 formControl 配置传递给 formgroup，这就是它始终有效的原因。如下更改 formGroup。

component.ts

testForm = this.fb.group({
    questions: this.fb.array([
      this.fb.group({
        testString: ['',Validators.required]
      })
    ])
  });

然后在模板中，我们应该像这样将 testString 键绑定到 formControlName 指令：

<form [formGroup]="testForm">
    <ng-container formArrayName="questions">
        <ng-container *ngFor="let question of questionControls.controls; let i = index" [formGroupName]="i">
            <input type="text" formControlName="testString" >
        </ng-container>
    </ng-container> 
</form>

Working Example

Answer 2

您在 FormArray 中设置 formGroup 的方式是错误的。您将需要一个用于 FormGroup 的对象请参阅下面的示例：
我还删除了 ngOnInit 部分。

    export class AppComponent {
      name = "Angular " + VERSION.major;
      testForm = this.fb.group({
        questions: this.fb.array([
          this.fb.group(
            {testString: new FormControl('', Validators.required)}
          ),
          this.fb.group(
            {testString: new FormControl('', Validators.required)}
          ),
        ])
      });
      
      constructor(private fb: FormBuilder) {}
      get questionControls() {
         return this.testForm.get('questions') as FormArray;
      }
    }

对于您的 HTML，您将需要一个 FormGroupName 和 FormControlName。
请参阅以下示例：

<form [formGroup]="testForm">
    <ng-container formArrayName="questions">
        <ng-container *ngFor="let question of questionControls.controls; let i = index">
          <ng-container [formGroupName]="i">
              <input formControlName="testString" />
            </ng-container>
        </ng-container>
    </ng-container>
</form>

在 Reactive Form 上制作 FormArray 控件

Making FormArray controls required on Reactive Form

angular

angular-reactive-forms