我正在使用嵌套的角度动态形式,如下所示:
<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
一样手动提取它们。
我希望,必须有一种方法可以使这些值直接显示在父窗体中,而不是手动将其放置在父窗体中。