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

Question

我正在尝试学习 Angular 中的反应形式。我可以写入所有属性，但 numb、alts、letter 和 text。

**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 错误类型错误：无法读取 null属性'controls'

如果有人能帮助我，请帮忙。我找到了这个例子，但我无法理解 https://stackblitz.com/edit/angular-nested-reactive-form-eg-na1ctu?file=src%2Fapp%2Fapp.component.html

Answer 1

试试这个：

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;   
}

“answers”在“test”中，这就是它返回 undefiend 的原因。

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

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

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

How can I access a properties of complex nested FormGroup

angular

angular-reactive-forms