Question

我有一个问题，是否可以在同一[stepControl]上添加2个“新FormControl”？让我解释一下，在我的应用程序中，当我进入步进器的第2步时，要进入第3步，我必须输入一个日期：

***<mat-step [stepControl]="dateControl">***
      <h3>Select date</h3>
      <mat-form-field>
        <input matInput [matDatepicker]="myDatepicker" (dateInput)="test()" (dateChange)="test()" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
      </mat-form-field>

      <section class="example-section">
        <h3>Select time</h3>
        <mat-radio-group *ngFor="let time of availableHours;  let i = index" formControlName="time" required>
          <!-- <button formControlName="time" mat-fab color="primary" value="time" (click)="getTime(time)">{{ time }} - {{ time + 1 }} h. </button> -->
          <mat-radio-button class="example-margin" [checked]="selected === i" (change)="selected = i" value="{{time}}">{{ time }} - {{ time + 1 }} h.</mat-radio-button>
        </mat-radio-group>
      </section>
      <br>
      <br>
      <div>
        <button mat-raised-button color="primary" matStepperPrevious type="button">Retour</button>
        <button mat-raised-button color="primary" matStepperNext type="button">Suivant</button>
      </div>
    </mat-step>
    <mat-step>

但是我也想补充一下选择时间这一事实（一切正常，我都知道了时间），但是我可以不选择一个小时就进入步进器的第3步，因为我只有一个“ [stepControl] = “ dateControl””。可以在一个stepControl上添加2个formControl吗？

谢谢！

Answer 1

一种方法可能是创建一个reactive角FormGroup，它同时包含日期FormControl和时间FormControl（以及它们的每个验证器或验证器列表），并替换{{1 }}中的dateControl以及您的FormGroup的名称。

这样做，应该要求FormGroup中两个FormControl的所有验证器必须有效，然后才能继续执行步进程序。

如果[stepControl]已作为新的FormGroup创建，那么您真正需要做的就是将时间FormControl添加到构建FormGroup的代码中，这样它们将成为该组中的两个FormControl。

为了清楚起见，您可以将其重命名为dateControl或复制旧的FormGroup并为其赋予新的名称，以便在测试修订时可以在模板代码中的新FormForm和旧FormGroup之间来回切换。

我没有使用Angular Material或其步进器组件，但是Angular FormControl和FormGroup都扩展了AbstractControl，并且应该可以在用于评估任何AbstractControl实例有效性的同一上下文中使用。

This 'reactive' FormGroup validation tutorial step说明了如何创建FormGroup以及如何添加验证器。

This possible duplicate question的问题标题实际上没有信息，也可以提供有用的相关指导，因为答案与我所建议的相似。

Answer 2

[stepControl]上的mat-step可以是任何AbstractControl。要将值嵌套在单个控件中，可以使用FormGroup。

datesGroup = new FormGroup({
  startDate: new FormControl(null, [Validators.required]),
  endDate: new FormControl(null, [Validators.required])
});

HTML：

<mat-step [stepControl]="datesGroup">
  <form [formGroup]="datesGroup">
    <input matInput formControlName="startDate">
    <input matInput formControlName="endDate">
  </form>
</mat-step>

datesGroup仅在其所有嵌套控件都有效的情况下才有效，因此在上面的示例中，只有输入所有值后，该步骤才会完成。

FormGroup和Stepper Angular 6

2 个答案: