【问题标题】:How to get Nested formgroup's controls in angular如何以角度获取嵌套表单组的控件
【发布时间】:2018-08-22 11:46:03
【问题描述】:

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。

角度编译错误,错误 TS2339:“AbstractControl”类型上不存在属性“控件”。

【问题讨论】:

    标签: angular


    【解决方案1】:

    我经常使用的一种方法是将子 formGroup 转换为表单组,因为 'get()' 方法返回一个 abstractControl 并使用 'get()' 方法来提取嵌套 formGroup 的控件,如下所示:

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

    【讨论】:

      【解决方案2】:

      你很接近。请参阅下面的代码示例或在我创建的非常简单(且丑陋)的 StackBlitz 上使用它。

      StackBlitz Demo

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

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

      **2019 年 12 月更新**

      我原来的答案有点过时了。现在有一种更清洁的方法来实现这一点!下面是更清洁解决方案的示例代码。

      this.myForm.get('child.id').valid

      【讨论】:

      • 谢谢,我的模板和你的一样。我可以在chrome中获得child的控件,而在ide中编译错误。错误 TS2339:“AbstractControl”类型上不存在属性“控件”。
      • 啊,是的,这是一个讨厌的 Angular 错误。查看更新的答案,请改用this.myForm['controls'].child['controls'].id.valid
      • 太棒了!你是对的。然后我找到了另一种解决问题的方法,将this.form.controls.child的类型转换为FormGroup。
      • 太棒了,很高兴这有效。此外,这也是一个巧妙的解决方案!您应该更新您的问题,以更具体地说明您需要解决的错误,以便遇到您问题的其他任何人都能找到解决方案。现在写的方式有点模糊,这是一个非常有效的问题。
      • 如何对那些嵌套的表单组项执行 setvalidators 功能。
      【解决方案3】:
      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);
      }
      

      【讨论】:

        【解决方案4】:

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

        检索嵌套控件

        例如,要获得嵌套在人员子组中的名称控件:

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

        -或-

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

        【讨论】:

        猜你喜欢
        • 2019-05-01
        • 2021-11-02
        • 1970-01-01
        • 2018-11-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-07-11
        相关资源
        最近更新 更多