为什么 mat-select 清除这种反应形式的价值？

Question

我正在开发类似 google 表单的应用程序，我们有一个带有问题的表单，我们从 api 中获取这些问题并动态呈现表单。问题是，当我想用 angular 反应形式向表单添加验证时，mat-select 停止工作，每次我 select 一个值时， select清楚了。

我已经尝试适应这个 https://medium.com/aubergine-solutions/add-push-and-remove-form-fields-dynamically-to-formarray-with-reactive-forms-in-angular-acf61b4a2afe 但运气不佳

模板

<mat-horizontal-stepper [linear]="true" #stepper style="background: transparent">
  <mat-step *ngFor="let materia of materias;let m = index;" [stepControl]="createForm(materia.id)">
    <ng-template matStepLabel>{{materia.descripcion}}</ng-template>
    <form [formGroup]="getForm(materia.id)">
      <div fxLayout="column" fxLayoutAlign="space-around stretch" fxLayoutGap="10px">
        <div>
          <mat-card *ngFor="let competencia of materia.competencias">
            <mat-card-header>
              <mat-card-title>{{competencia.nombre}}</mat-card-title>
            </mat-card-header>
            <mat-card-content>              
              <div fxLayout="column" fxLayoutGap="30px" formArrayName="{{createFormArray(materia.id,competencia.id)}}">
                <div fxLayout="row">
                  <i>{{competencia.descripcion}}</i>
                </div>
                <div fxLayout="column" fxLayoutGap="2px">
                  <span *ngFor="let competenciaSimple of competencia.competenciasSimples; let i = index;" fxLayout="row">
                    <mat-form-field appearance="outline"
                      *ngIf="competenciaSimple !== null && competenciaSimple !== undefined" fxFlex>
                      <mat-select (selectionChange)="onSelected($event,competenciaSimple)"
                        [value]="getSelectedValue(competenciaSimple)" [formControl]="createControl(materia.id,competencia.id)" [id]="i">
                        <span *ngFor="let fase of competenciaSimple.fases">
                          <mat-option *ngFor="let conductaObservable of fase.conductasObservables"
                            [value]="conductaObservable">
                            {{conductaObservable.descripcion}}
                          </mat-option>
                        </span>
                      </mat-select>
                    </mat-form-field>
                    <!-- <input type="hidden" value="competenciaSimple" [(ngModel)]="calificacion.conductasObservables[i].competenciaSimple"/> -->
                  </span>
                </div>
              </div>

            </mat-card-content>
          </mat-card>
        </div>
        <div fxLayout="row">
          <button mat-flat-button type="button" matStepperPrevious *ngIf="!isFirstPage" color="primary"
            fxFlex="20">ANTERIOR</button>
          <span fxFlex="80"></span>
          <button mat-flat-button type="button" *ngIf="!isLastPage" color="primary" fxFlex="20">SIGUIENTE</button>
          <button mat-flat-button type="button" (click)="onSubmit()" *ngIf="isLastPage" color="accent"
            fxFlex="20">TERMINAR</button>
        </div>
      </div>
    </form>
  </mat-step>
</mat-horizontal-stepper>

component.ts


forms = new Array<FormGroup>();

getForm(index: number): FormGroup {
    return this.forms[index];
  }

  createForm(index: number): FormGroup {
    const form = this.formBuilder.group({});
    this.forms[index] = form;
    return form;
  }

  createFormArray(index: number, name: string): string {
    const array = this.formBuilder.array([]);
    const arrayName = `competencia_${name}`;
    this.forms[index].addControl(arrayName, array);
    return arrayName;
  }

  createControl(index: number, arrayName: string): FormControl {
    const control = this.formBuilder.control(false);
    const an = `competencia_${arrayName}`;
    const array = (this.forms[index].get(an));
    (array as FormArray).push(control);
    return control;
  }

  getControlId(): string {
    this.controlNumber += 1;
    return this.controlNumber.toString()
  }

想法是根据需要验证 mat-select，这样步进器在没有值 selected 时无法前进，如果添加验证器就可以工作，但是 mat-select 不保留该值，因此如果我删除 [formControl]="createControl(materia.id,competencia.id)" mat-select 工作但没有验证结果。

Answer 1

有几个流行的开源 Angular 表单库（您可以查看源代码并了解它们如何向控件动态添加验证）：

GitHub: ng-dynamic-forms
GitHub: ngx-formly
GitHub: angular-schema-form (AngularJS) - Generate forms from a JSON schema
GitHub: ngx-schema-form - HTML form generation based on JSON Schema
GitHub: angular2-json-schema-form - Angular 2 JSON Schema Form builder

为什么 mat-select 清除这种反应形式的价值？

Why mat-select clear the value in this reactive form?

angular6

angular-material2

angular-reactive-forms