Currently using angular 11 and encountering a challenge with implementing the following functionality: A stepper containing two inputs in a single step, specifically a datepicker and a select dropdown menu. The objective is for the stepControl to validate that both fields have been filled out and be able to retrieve their values.
While I have multiple steps in my example, it's this particular one that's causing issues.
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 declaration :
public fourthFormGroup: FormGroup;
TS in ngOnInit :
this.fourthFormGroup = this._formBuilder.group({
date: new FormControl(new Date()),
hours: new FormControl('', Validators.required)
});
Issue Faced :
The challenge lies in retrieving values from this form. Moreover, validation of the form when empty fields are present results in backend errors, which are not being visually indicated by the frontend-component as expected (such as highlighting the field in red and indicating it as required).
Your assistance is greatly appreciated! Kev'.