58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<mat-card class="lg:max-w-[50%]">
|
|
<mat-card-header>
|
|
<mat-card-title>Guest Details</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form [formGroup]="form" class="flex flex-col">
|
|
<div class="flex flex-row justify-around content-start items-start">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Name</mat-label>
|
|
<input matInput #name formControlName="name" />
|
|
<mat-error *ngIf="form.controls['name'].hasError('required')"> Name is <strong>required</strong> </mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="flex flex-row justify-around content-start items-start">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Phone</mat-label>
|
|
<input matInput #phone type="text" formControlName="phone" [matAutocomplete]="auto" autocomplete="off" />
|
|
</mat-form-field>
|
|
<mat-autocomplete
|
|
#auto="matAutocomplete"
|
|
autoActiveFirstOption
|
|
[displayWith]="displayFn"
|
|
(optionSelected)="selected($event)"
|
|
>
|
|
<mat-option *ngFor="let customer of customers | async" [value]="customer"
|
|
>{{ customer.name }} - {{ customer.phone }}</mat-option
|
|
>
|
|
</mat-autocomplete>
|
|
</div>
|
|
<div class="flex flex-row justify-around content-start items-start">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Pax</mat-label>
|
|
<input matInput type="number" formControlName="pax" />
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="flex flex-row justify-around content-start items-start">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Address</mat-label>
|
|
<textarea matInput formControlName="address"></textarea>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="flex flex-row justify-around content-start items-start">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Hours</mat-label>
|
|
<input matInput formControlName="hours" />
|
|
</mat-form-field>
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Minutes</mat-label>
|
|
<input matInput formControlName="minutes" />
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|