从 html 访问表单生成器中的数据

Question

所以我在 onInit 生命周期中初始化了一个 FormBuilder：

surveyForm: FormGroup;
ngOnInit(): void {
     this.surveyForm = this.formBuilder.group({
       'surveyTitle': new FormControl(null),
       'surveyDescription': new FormControl(null),
       'questionsDetail': this.formBuilder.array([
         this.formBuilder.group({
           'questionType': new FormControl('mcq'),
           'question': new FormControl(null),
           'choices': this.formBuilder.array([])
         })
       ])
     });
    };

我不知道如何访问我的 FormArray 的控件

<form [formGroup]="surveyForm">
  <input formControlName = "surveyTitle">
  <textarea formControlName = "surveyQuestion"></textArea><div formArrayName='questionsDetail'>
    <div [FormArrayName]="questionsDetail">
      <div *ngFor="let questionDetail of surveyForm.get('questionsDetail').controls; let i=index">
        <div [FormGroup]="i">
          ...
          <div [FormArrayName]="choices">
            <div *ngFor="let choice of surveyForm.get('questionsDetail').controls.get('choices').controls; let in=index">
              <div [FormGroup]="in">
                ...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>

谁能告诉我在嵌套在 FormArray 中的 FormGroup 中获取数据的语法。在访问 formBuilder 时，我似乎无法获得 ngFor 的正确语法。

如果你能帮助我，那就太好了。

提前致谢。

Answer 1

试试下面

<form [formGroup]="surveyForm">
  <input formControlName = "surveyTitle">
  <textarea formControlName = "surveyQuestion"></textArea><div formArrayName='questionsDetail'>
    <div formArrayName="questionsDetail">
      <div *ngFor="let questionDetail of surveyForm.get('questionsDetail')['controls']; let i=index">
        <div [FormGroup]="i">
          ...
          <div formArrayName="choices">
            <div *ngFor="let choice of surveyForm.get('questionsDetail')['controls'][i].get('choices')['controls']; let in=index">
              <div [FormGroup]="in">
                ...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>

请注意，我没有绑定到 [FormArrayName]="questionsDetail 行中的 [FormArrayName]。这应该是 formArrayName="questionsDetail。 choices

相同

从 html 访问表单生成器中的数据

Accessing the data withing a FormBuilder from the html

typescript

angular

angular-reactive-forms

formarray

formgroups