51 lines
2.4 KiB
HTML
51 lines
2.4 KiB
HTML
<details class="card p-0!" open>
|
|
<summary class="p-4">
|
|
<label for="currentAddress" class="font-medium text-gray-600 ml-2">Add new address</label>
|
|
</summary>
|
|
<form [formGroup]="addressForm" class="w-full flex flex-col gap-y-2 pt-0 p-4">
|
|
<fieldset class="flex space-x-4 w-full">
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">First Name</legend>
|
|
<input type="text" formControlName="firstName" class="input" placeholder="Example: Jhon" />
|
|
<app-error fieldName="First name" [control]="addressForm.get('firstName')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Last Name</legend>
|
|
<input type="text" class="input" formControlName="lastName" placeholder="Example: Doe" />
|
|
<app-error fieldName="Last name" [control]="addressForm.get('lastName')" />
|
|
</fieldset>
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Street Address</legend>
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
formControlName="streetAddress"
|
|
placeholder="Your street address"
|
|
/>
|
|
<app-error fieldName="Street address" [control]="addressForm.get('streetAddress')" />
|
|
</fieldset>
|
|
<fieldset class="flex space-x-4 w-full">
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">City</legend>
|
|
<input type="text" class="input" formControlName="city" placeholder="Your city" />
|
|
<app-error fieldName="City" [control]="addressForm.get('city')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">State</legend>
|
|
<input type="text" class="input" formControlName="state" placeholder="State Name" />
|
|
<app-error fieldName="State" [control]="addressForm.get('state')" />
|
|
</fieldset>
|
|
<fieldset class="fieldset w-full">
|
|
<legend class="fieldset-legend">Pin Code</legend>
|
|
<input type="text" class="input" formControlName="pinCode" placeholder="7XX XX1" />
|
|
<app-error fieldName="Pin Code" [control]="addressForm.get('pinCode')" />
|
|
</fieldset>
|
|
</fieldset>
|
|
<div class="ml-auto flex space-x-4">
|
|
<button type="button" class="btn btn-ghost px-3 text-sm">Cancel</button>
|
|
<button class="btn btn-primary px-3 text-sm">Use this address</button>
|
|
</div>
|
|
</form>
|
|
</details>
|