FormGroup和Stepper Angular 6_Angular_Angular Material

FormGroup和Stepper Angular 6

angular angular-material

FormGroup和Stepper Angular 6,angular,angular-material,Angular,Angular Material,我有一个问题，是否可以在同一个[stepControl]上添加2个“new FormControl”？让我解释一下，在我的应用程序中，当我在步进机的第2步时，要进入第3步，我必须输入一个日期： ***<mat-step [stepControl]="dateControl">*** <h3>Select date</h3> <mat-form-field> <input matInput [matDa

我有一个问题，是否可以在同一个[stepControl]上添加2个“new 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>

******
选择日期
选择时间
{{time}}-{time+1}}h。




复述
苏万特

但我还想补充一个选择时间的事实（一切都很好，我得到了时间），但我可以在不选择小时的情况下进入步进器的第3步，因为我只有一个“[stepControl]=”dateControl“。是否可以在一个单步控制上添加两个formControl

谢谢大家!

一种方法是创建一个包含日期表单控件和时间表单控件（以及它们各自的验证器或验证器列表）的Angular控件，并将

[stepControl]

赋值中的

日期控件

替换为表单组的名称

通过这样做，应该要求FormGroup中两个FormControl的所有验证器在允许stepper继续之前必须有效

如果已将

dateControl

创建为一个新的FormGroup，则真正需要做的就是将time FormControl添加到构建FormGroup的代码中，使其成为组中的两个FormControl

为了清晰起见，您可以将其重命名为

dateTimeControl

，或者复制旧FormGroup并为其指定新名称，以便在测试修复程序时，可以在模板代码中的新FormGroup和旧FormGroup之间来回切换

我没有使用Angular Material或其stepper组件，但Angular FormControl和FormGroup都扩展了AbstractControl，应该可以在评估任何AbstractControl实例有效性的相同上下文中使用

说明如何创建FormGroup以及如何添加验证程序

如果有一个真正没有信息的问题，标题也可以提供有用的相关指导，因为答案与我的建议类似。

一种方法可以是创建一个包含日期表单控件和时间表单控件（以及它们各自的验证器或验证器列表）的角度控件并将

[stepControl]

分配中的

dateControl