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

Question

所以我正在使用 angular 11 并努力获得以下行为：一个步进器，在一个步骤中有两个输入，一个日期选择器和a select（下拉菜单）。然后我希望 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)
});

为什么不起作用：

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

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

Answer 1

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

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

见this demo

NB

我认为更好的方法是简单地为您的所有输入设置一个 formGroup

  myForm = this.formBuilder.group({
    thirdFormControl: ['', [Validators.required]],
    date: [new Date(), [Validators.required]],
    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

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

Angular 11 : multiple fields form in stepper

angular

typescript

angular-forms

angular11

angular-material-stepper