如何以角度方式获取嵌套formgroup的控件

Question

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: ['']
  })
});

我想得到孩子的有效性,就像this.form.controls.child.controls.valid,而.controlsrenturn AbstractControl引用这个formgroup api.

角度编译错误,错误TS2339:类型'AbstractControl'上不存在属性'controls'.

Answer 1

你很亲密 请参阅下面的代码示例,或者在我创建的非常简单(且丑陋)的StackBlitz上使用它.

StackBlitz演示

在您的模板中,请务必添加您的子表单组.

<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

我为此示例创建的反应形式:

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

Answer 2

有几种非常简单的方法可以访问嵌套 FormGroup 中的 FormControl。从 AbstractControl 使用说明：

检索嵌套控件

例如，要获取嵌套在人员子组中的名称控件：

this.form.get('person.name');

-或者-

this.form.get(['person', 'name']);

Answer 3

我经常使用的一种方法是将子项转换FormGroup为 a FormGroup，因为 'get('control')' 方法返回 an AbstractControl，然后使用 'get()' 方法访问子项FormGroup选项，如下所示：

(this.form.get('child') as FormGroup).get('id').valid

Answer 4

我有以下表格：

registerLibrarianForm = this.formBuilder.group({
       firstName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(128), Validators.pattern(this.nameRegex)]],
       lastName:  ['', [Validators.required, Validators.minLength(2), Validators.maxLength(128), Validators.pattern(this.nameRegex)]],
       address: this.formBuilder.group({
         country: ['', [Validators.required]],
         city: ['', [Validators.required]]})})

我获取主窗体（registerForm）控件的方法是创建一个简单的返回方法：

get controls(){
return this.registerForm.controls;
}

我获取嵌套表单（地址）的控件的方法是创建另一个方法：

get addressControls(){
return ((this.registerForm.get('address') as FormGroup).controls)
}

因此，如果您需要在主表单的 HTML 中执行 *ngIf，请使用第一种方法

*ngIf="controls.firstName.errors && ...

对于嵌套形式：

*ngIf="addressControls.country.errors && ...

我希望这会有所帮助！

Answer 5

userForm=new FormGroup({
    fName:new FormControl('',Validators.required),
    lName:new FormControl(),
    eMail:new FormControl('',[Validators.email,Validators.required]),
    qualificationForm:new FormGroup({
     perS:new FormControl(''),
     perHs:new FormControl('')
    })
});

save(){
  console.log(this.userForm.get("qualificationForm.perS").value);
}