You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
5.0 KiB
HTML
134 lines
5.0 KiB
HTML
<div class="cart-container">
|
|
<div class="cart-list-items" *ngIf="cartItems.length != 0">
|
|
<div class="cart-item" *ngFor="let item of cartItems">
|
|
<div class="cart-item-img">
|
|
<img src={{item.url}}>
|
|
</div>
|
|
<div class="cart-item-details">
|
|
<span class="cart-item-name">{{item.name}}</span>
|
|
<span class="cart-item-pq">
|
|
{{item.price | currency}}
|
|
<span class="item-quantity">
|
|
x {{item.quantity}}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="cart-item-delete">
|
|
<a (click)="deleteFromCart(item)"><mat-icon>delete</mat-icon></a>
|
|
</div>
|
|
</div>
|
|
<div class="cart-total-price">
|
|
<span>Total : {{totalPrice | currency}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form *ngIf="cartItems.length != 0" #checkoutForm="ngForm" class="cart-payment-from" (ngSubmit)="onSubmit()">
|
|
<mat-form-field class="from-input" appearance="outline">
|
|
<mat-label>First Name</mat-label>
|
|
<input
|
|
matInput
|
|
type="text"
|
|
name="firstname"
|
|
[ngModel]="firstname"
|
|
(ngModelChange)="firstname = $event"
|
|
required
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.controls['firstname']?.errors?.['required']">
|
|
First Name is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="from-input" required appearance="outline">
|
|
<mat-label>Last Name</mat-label>
|
|
<input
|
|
matInput
|
|
type="text"
|
|
name="lastname"
|
|
[ngModel]="lastname"
|
|
(ngModelChange)="lastname = $event"
|
|
required
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.controls['lastname']?.errors?.['required']">
|
|
Last Name is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="from-input" appearance="outline">
|
|
<mat-label>Email</mat-label>
|
|
<input
|
|
matInput
|
|
type="email"
|
|
name="email"
|
|
[ngModel]="email"
|
|
(ngModelChange)="email = $event"
|
|
placeholder="Ex. pat@example.com"
|
|
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
|
|
required
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.controls['email']?.errors?.['pattern']">
|
|
Please enter a <strong>valid</strong> email address
|
|
</mat-error>
|
|
<mat-error *ngIf="checkoutForm.controls['email']?.errors?.['required']">
|
|
Email is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="from-input" appearance="outline">
|
|
<mat-label>Address</mat-label>
|
|
<input
|
|
matInput
|
|
type="text"
|
|
name="address"
|
|
[ngModel]="address"
|
|
(ngModelChange)="address = $event"
|
|
placeholder="Ex. 100 Main St"
|
|
required
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.controls['address']?.errors?.['required']">
|
|
Address is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="from-input" appearance="outline" type="number">
|
|
<mat-label>Postal Code</mat-label>
|
|
<input
|
|
matInput
|
|
type="number"
|
|
name="postalcode"
|
|
[ngModel]="postalcode"
|
|
(ngModelChange)="postalcode = $event"
|
|
maxlength="5"
|
|
placeholder="Ex. 94105"
|
|
required
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.controls['postalcode']?.errors?.['required']">
|
|
Postal Code is <strong>required number</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<button mat-raised-button color="primary" type="submit" [disabled]="!checkoutForm.valid">Submit</button>
|
|
</form>
|
|
|
|
<div class="ifempty-cart" *ngIf="cartItems.length === 0">
|
|
<p>Your cart is empty you need to add some product</p>
|
|
<button class="card-button" mat-raised-button routerLink="/" color="primary">Back to products</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <mat-form-field class="from-input" appearance="outline">
|
|
<mat-label>Email</mat-label>
|
|
<input
|
|
type="email"
|
|
matInput
|
|
formControlName="email"
|
|
placeholder="Ex. pat@example.com"
|
|
/>
|
|
<mat-error *ngIf="checkoutForm.get('email')?.hasError('email') && !checkoutForm.get('email')?.hasError('required')">
|
|
Please enter a <strong>valid</strong> email address
|
|
</mat-error>
|
|
<mat-error *ngIf="checkoutForm.get('email')?.hasError('required')">
|
|
Email is <strong>required</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
--> |