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

Question

我正在尝试在 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 错误类型错误：无法读取 null 的属性“控件”

请如果有人可以帮助我。我找到了这个例子，但我无法理解 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;   
}

“答案”在“测试”中，这就是它返回 undefiend 的原因。

编辑：要访问字母或文本，您可以执行以下操作：您必须使用索引来了解要获取 formArray 中的哪个 formGroup。

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