如何访问复杂的嵌套FormGroup的属性

安德烈·马查多·蒙特

我正在尝试学习Angular中的反应形式。我能够写入所有属性,但麻木,替代,字母和文本。

**COMPONENT.TS**

createForm() {
    this.userForm = this.fb.group({
      fname: ['', [Validators.required]],
      lname: ['', [Validators.required]],
      email: ['', [Validators.email, Validators.required]],
      facility: ['', [Validators.required]],
      position: [''],
      test: this.fb.group({
        name: [''],
        id: [''],
        date: [''],
        scored: [''],
        wrong: [''],
        duration: [''],
        answers: this.fb.array ([
          this.fb.group({
            numb: [''],
            alts: this.fb.group({
              letter: this.fb.array([]),
              text: this.fb.array([])
            })
          })
        ])
      })
    })
  }

  get answerArray() {
    return this.userForm.get("answers") as FormArray;
  }
**COMPONENT.HTML**

  <form [formGroup]="userForm">
    <div formGroupName="test">
      <div formArrayName="answers">
        <div *ngFor="let ans of answerArray.controls; let i = index">
          <div [formGroupName]="i">
              <input type="text" formControlName="">
          </div>
        </div>
      </div>
    </div>
  </form>
  <pre>{{ userForm.value | json}}</pre>

我收到此错误:core.js:6241错误TypeError:无法读取null的属性'controls'

请任何人可以帮助我。我找到了这个示例,但我无法理解https://stackblitz.com/edit/angular-nested-reactive-form-eg-na1ctu?file=src%2Fapp%2Fapp.component.html

阿卜杜勒马克·迪夫

试试这个:

get answerArray() {
   return this.userForm.controls['test'].get("answers") as FormArray;   
}

要么

get answerArray() {
   return this.userForm.get("test.answers") as FormArray;   
}

要么

get answerArray() {
   return this.userForm.get(["test","answers"]) as FormArray;   
}

“答案”位于“测试”内部,这就是其返回未防御状态的原因。

编辑:要访问字母或文本,您可以执行以下操作:您必须为此使用索引才能知道要获取formArray中的哪个formGroup。

get textArray(index: number): FormArray {      
  return this.answerArray().at(index).get('alts').get('text') as FormArray;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

访问嵌套 formGroup 中的表单属性

来自分类Dev

如何访问嵌套模板属性?

来自分类Dev

如何访问嵌套的bigquery属性?

来自分类Dev

如何访问嵌套模板属性?

来自分类Dev

Rails-如何访问嵌套的params属性?

来自分类Dev

如何使用TypeScript访问嵌套的JSON属性?

来自分类Dev

如何在WPF中访问嵌套属性?

来自分类Dev

如何访问嵌套属性的验证错误?

来自分类Dev

Nhibernate Queryover,如何访问嵌套的属性

来自分类Dev

如何从嵌套对象函数访问对象属性?

来自分类Dev

无法访问嵌套formGroup的值

来自分类Dev

访问嵌套FormGroup中的FormArray以动态创建

来自分类Dev

如何使用 Twig 的属性函数访问嵌套对象属性

来自分类Dev

嵌套记录的访问属性

来自分类Dev

如何访问复杂的JSON

来自分类Dev

复杂的JSON嵌套和循环访问

来自分类Dev

如何在JsRender嵌套模板中访问父数据属性

来自分类Dev

如何访问console.table()中的嵌套对象属性?

来自分类Dev

如何使用字符串从表单访问嵌套属性?

来自分类Dev

如何从嵌套的内容页面访问母版页公共属性

来自分类Dev

如何访问嵌套数组中的对象的属性?

来自分类Dev

如何在Javascript中访问嵌套对象的属性?

来自分类Dev

如何访问嵌套对象数组中的对象属性?

来自分类Dev

如何使用外部类的实例访问嵌套类的属性

来自分类Dev

如何在组件类内部访问formGroup

来自分类Dev

嵌套对象的对象访问属性

来自分类Dev

从嵌套标签XSLT访问属性

来自分类Dev

从嵌套函数访问函数属性

来自分类Dev

使用AppleScript访问嵌套属性