Angular：以反应形式连接字符串中的 formArray ngfor 索引

Question

我有一个反应式表单，它包含一个表单数组，该表单数组包含一个 formGroup 以及其中的一个表单控件

this.questionsForm = new FormGroup({
      'theWholeForm':new FormArray([
        new FormGroup({
          "question": new FormControl(null) ,
          "questionType":new FormControl('True or False') 
        })
      ]),
      
    });

getTheWholeForm(){
    return (this.questionsForm.get('theWholeForm') as FormArray).controls;
  }

所以为了访问表单控件，这工作正常，因为表单组的名称是索引号，

this.questionsForm.get('theWholeForm.0.questionType')!.value

那么如何从 html 访问它在 html:

<form [formGroup]="questionsForm" (ngSubmit)="onNext()" class=" ">
        <div formArrayName="theWholeForm">
            <div *ngFor="let qt of getTheWholeForm();let r = index">
              {{this.questionsForm.get('theWholeForm.r.questionType')!.value}} 
            </div>
        </div>
</form>

但是它给我一个错误

[Can't read property 'value' of null]

我认为这实际上是因为它读取 'r' 作为表单组的实际名称而不是索引。

我该如何解决这个问题？或者我怎样才能知道 angular 这个 'r' 是保存索引而不是字符串的变量 r？

Answer 1

你试过在get()方法的参数中用字符串拼接插入索引吗？

我认为这是问题所在。 Angular 将 ('theWholeForm.r.questionType') 作为字符串处理。

因此，它不会将 r 解析为 *ngFor="" 的索引。

我想如果你试过就可以解决('theWholeForm.' + r + '.questionType')

Answer 2

在您的 TS 文件中声明一个 getter 并在您的模板中使用它

  get theWholeForm() {
    return this.questionsForm.get('theWholeForm') as FormArray;
  }

在你的 html

     <div *ngFor="let qt of getTheWholeForm();let r = index">
       {{ theWholeForm.controls[r].get('questionType').value}} 
     </div>

Answer 3

使用如下：

<form [formGroup]="questionsForm" (ngSubmit)="onNext()" class=" ">
        <div formArrayName="theWholeForm">
            <div *ngFor="let qt of getTheWholeForm();let r = index">
              {{ qt.get('questionType')!.value }} 
            </div>
        </div>
</form>

Angular：以反应形式连接字符串中的 formArray ngfor 索引

Angular: Concatenate formArray ngfor index inside string in reactive forms

typescript

angular

angular-reactive-forms