Angular 11：步进器中形成多个字段

问题描述

所以我正在使用 angular 11 并努力获得以下行为：一个步进器，在单个步骤中有两个输入，即日期选择器和选择（下拉菜单）。然后我希望 stepControl 验证两个字段都已填充，并能够检索它们的值。

在我的示例中，我有很多步骤，但这是给我带来麻烦的步骤。

HTML：

<mat-vertical-stepper>

   <!-- First steps... -->

   <mat-step state="date" [stepControl]="fourthFormGroup">
       <form [formGroup]="fourthFormGroup">
         <mat-form-field>
           <ng-template matStepLabel>Placeholder Text Date</ng-template>
           <input matInput [min]="minDate" [matDatepicker]="picker" [formControl]="date">
           <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>

         <br/>

         <mat-form-field>
           <mat-label>Placeholder Text Hour</mat-label>
            <mat-select [formControl]="hours" required>
             <mat-option *ngFor="let j of hours" [value]="j[0]">
               {{j[1]}}
             </mat-option>
           </mat-select>
         </mat-form-field>
       </form>
       <div>
         <button mat-button matStepperPrevIoUs>Back</button>
         <button mat-button (click)="searchNow()">Search</button>
        </div>
     </mat-step>

</mat-vertical-stepper>

TS 声明：

public fourthFormGroup: FormGroup;

ngOnInit 中的 TS ：

this.fourthFormGroup = this._formBuilder.group({
  date: new FormControl(new Date()),hours: new FormControl('',Validators.required)
});

为什么它不起作用：

我无法从该表单中检索值。此外，使用空字段验证表单会产生后端错误，但前端组件不会像您期望的那样阻止它（以红色亮起并表示该字段是必需的）。

非常感谢您的帮助！ 凯夫'。

解决方法

您面临的问题是您正在混合指令。您将 [FormControl] 绑定到未定义的值，例如 [formControl]='date' 肯定不起作用。

将 [formControl]='date' 更改为 formControlName='date' 并将 formControl="hours" 更改为 formControlName="hours"

见this demo

注意

我相信更好的方法是让一个 formGroup 用于所有输入

  myForm = this.formBuilder.group({
    thirdFormControl: ['',[Validators.required]],date: [new Date(),hours: ["",[Validators.required]]
  })

并修改你的html

<form [formGroup]='myForm'>
    <mat-vertical-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="step[0]" [optional]="true">

            <ng-template matStepLabel>Placeholder title</ng-template>
            <mat-form-field>
                <mat-label>Placeholder label</mat-label>
                <textarea
          matInput
          cdkTextareaAutosize
          #autosize="cdkTextareaAutosize"
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="10"
          placeholder="Optionnel"
          formControlName="thirdFormControl"
        ></textarea>
            </mat-form-field>
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </mat-step>

        <mat-step state="date" [stepControl]="step[1]">
            <mat-form-field>
                <ng-template matStepLabel>Placeholder label 0</ng-template>
                <input
          matInput
          [min]="minDate"
          [matDatepicker]="picker"
          formControlName="date"
        />
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

            <br />

            <mat-form-field>
                <mat-label>Placeholder label 1</mat-label>
                <mat-select formControlName="hours" required>
                    <mat-option *ngFor="let j of hours" [value]="j[0]">
                        {{j[1]}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button (click)="searchNow()">Search</button>
            </div>
        </mat-step>
    </mat-vertical-stepper>
</form>

现在如果没有捕获任何输入，表单将无效

Sample Here