所以我正在使用angular 11并努力获得以下行为:一个步进器,在一个步骤中有两个输入,即一个 datepicker 和一个 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)
});
为什么它不起作用:
我无法从此表单中检索值。此外,使用空字段验证表单会产生后端错误,但不会像您期望的那样被前端组件阻止(以红色亮起并表示该字段是必需的)。
非常感谢您的帮助 !凯夫'。