I am currently developing an Angular application and have encountered an issue that I am unable to resolve by solely reading the documentation.
One of the components in my application is responsible for displaying a form:
https://i.stack.imgur.com/p5KEU.png
The form comprises various fields, some of which are simple input fields while others are dropdowns populated with values retrieved from asynchronous services.
Here is the structure of the form:
<h1 mat-dialog-title>Add device data</h1>
<form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup)">
<div mat-dialog-content>
<p>
<mat-form-field appearance="fill">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="formGroup.get('date')?.hasError('required')">
Date is required
</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="fill">
<mat-label>Flat</mat-label>
<mat-select formControlName="flat">
<mat-option *ngFor="let flat of flatService.flats$ | async"
[value]="flat">
{{flat.title}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('flat')?.hasError('required')">
Flat is required
</mat-error>
</mat-form-field>
</p>
<!-- Other form fields go here -->
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCancel()" type="reset">Cancel</button>
<button mat-button [disabled]="!formGroup.valid" type="submit">Save</button>
</div>
</form>
In my component's TypeScript code:
@Component({
selector: 'app-dashboard-device-dialog',
templateUrl: './device-dialog.component.html',
styleUrls: ['./device-dialog.component.css']
})
export class DashboardDeviceDialogComponent implements OnInit {
// Component properties and methods go here
}