【问题标题】:Accessing the data withing a FormBuilder from the html从 html 访问 FormBuilder 中的数据
【发布时间】:2021-03-06 19:54:35
【问题描述】:

所以我在 onInit Lifecyle 中初始化了一个 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 的正确语法。

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

提前致谢。

【问题讨论】:

    标签: angular typescript angular-reactive-forms formarray formgroups


    【解决方案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="questionsDetailchoices也一样

    【讨论】:

    • 哦,谢谢,但现在我的 *ngFor 出现错误,指出“未定义标识符‘控件’。‘AbstractControl’不包含这样的成员”
    • 现在是打字稿问题,我更新了代码以使用括号符号['controls']而不是点符号.controls访问控件
    • 我现在收到此错误“元素隐式具有 'any' 类型,因为类型 'AbstractControl' 没有索引签名。你的意思是调用 'get'?”在
    • 是的,我用过这段代码 get questionsDetailcontrols() { return (this.surveyForm.get('questionsDetail') as FormArray); } 和 *ngFor="questionDetailcontrols.control"。我认为它必须知道它的 FormArray 类型,这就是我们必须在 .ts 文件中显式转换它的原因。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签