Shelf_Front/src/app/components/cart/cart.component.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>
        -->