提交父表单时缺少角动态子表单的值

时间:2018-08-23 18:32:10

标签: angular

我正在使用嵌套的角度动态形式,如下所示:

<div [formGroup]="form" class='question'>
  <div [ngSwitch]="question.controlType">
    <mat-form-field *ngSwitchCase="'dropdown'" class='full-width-field'>
      <mat-select  [id]="question.key" *ngSwitchCase="'dropdown'" [placeholder]="question.label" [formControlName]="question.key"
        [multiple]="question.multiple">
        <mat-option *ngFor="let opt of question.options" [value]="opt.key" matTooltipPosition='right' [matTooltip]="opt.details">{{opt.value | titlecase}}</mat-option>
      </mat-select>
    </mat-form-field>
    <div *ngSwitchCase="'set'">
      <div [formGroup]="form.controls.references" class='question'>
        <mat-form-field *ngFor="let opt of question.options" class='full-width-field'>
          <input type="text" [formControlName]="opt.key" (keyup)='trim(opt.key)' matInput [placeholder]="opt.value" (paste)="onPaste($event)">
        </mat-form-field>
      </div>
    </div>
  </div>
</div>

我的提交功能如下:

onSubmit() {
    // 1. child form is present as control inside the parent form
    // 2. child form's values are missing
    const formData = this.form.value;


    // 3. I'm able to get them like this
    const refs = this.form.controls.references.value;
}

在调试过程中,我可以从#1的第一种形式的控件中看到有关代码的孩子。但是,这些值在父窗体中不可用。 然后,我必须像上面的代码中的#3一样手动提取它们。

我希望,必须有一种方法可以使这些值直接显示在父窗体中,而不是手动将其放置在父窗体中。

0 个答案:

没有答案