如何以Angular 获取嵌套表单组的控件

发布于03月14日

https://angular.io/api/forms/FormGroup#controls

按照我的方式:

this.form= this.fb.group({
  id: ['', [Validators.required]],
  name: ['', [Validators.maxLength(500)]],
  child: this.fb.group({
    id: [ '', [Validators.required]],
    name: ['']
  })
});

我想要得到child的有效性，比如this.form.controls.child.controls.valid，而.controls renturn AbstractControl引用这个formgroup api.

Angular 编译错误，错误TS2339:""AbstractControl""类型上不存在属性""Controls"".""

推荐答案

你很接近.请参阅下面的代码示例，或者在我创建的非常简单(也很难看)的StackBlitz上使用它.

StackBlitz Demo

In your template be sure to add your child form group.

<div>
    <form [formGroup]="myForm" (ngSubmit)="send()">
      <input type="text" name="name" formControlName="name">
      <div formGroupName="child">
         <input type="text" name="id" formControlName="id">
         <input type="text" name="name" formControlName="name">
      </div>
      <button class="btn btn-primary">send</button>
    </form>
  </div>

然后在您的组件中，您可以像这样访问字段.

this.myForm['controls'].child['controls'].id.valid

我为这个例子创建的react 式表单:

this.myForm = this.fb.group({
      name: ['', [Validators.maxLength(500)]],
      child: this.fb.group({
        id: ['', [Validators.required]],
        name: ['']
      })
    });