<div class="register-form">
<form [formGroup]="paymentForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<h1>Payment</h1>
<label style="font-size: 15px;">Name on the Card:</label>
<input type="text" formControlName="nameOnCard" class="form-control" placeholder="name of card holder"
[ngClass]="{ 'is-invalid': f['nameOnCard'].errors && (f['nameOnCard'].dirty || f['nameOnCard'].touched) }">
<div *ngIf="paymentForm && f['nameOnCard'].errors" class="invalid-feedback">



<div *ngIf="f['nameOnCard'].errors['required']">Please enter Associate Name</div>
<div *ngIf="f['nameOnCard'].errors['pattern']"> Accepts Alphabets & space </div>
</div>
</div>
<div class="form-group">
<label style="font-size: 15px;">Card Number</label>
<input formControlName="cardNumber" class="form-control" placeholder="enter 16 digit number"
[ngClass]="{ 'is-invalid': f['cardNumber'].errors && (f['cardNumber'].dirty || f['cardNumber'].touched)}">
<div *ngIf="paymentForm && f['cardNumber'].errors" class="invalid-feedback">
<div *ngIf="f['cardNumber'].errors['required']">Please enter Card Number</div>



<div *ngIf="f['cardNumber'].errors['minlength']"> Mininimun length should be 16 </div>
</div>
</div>
<div class="form-group ">
<label style="font-size: 15px;">Date of Expiration</label>
<div class="date">
<input class="form-control month" type="number" formControlName="expirationMonth" placeholder="MM"
[ngClass]="{'is-invalid': !f['expirationMonth'].valid && (f['expirationMonth'].dirty || f['expirationMonth'].touched) }">
<input class="form-control year" type="number" formControlName="expirationYear" placeholder="YYYY"
[ngClass]="{ 'is-invalid': f['expirationYear'].errors && (f['expirationYear'].dirty || f['expirationYear'].touched) }">
</div>
<div *ngIf="paymentForm && f['expirationMonth'].errors" class="invalid-feedback">
<div *ngIf="paymentForm && f['expirationYear'].errors" class="invalid-feedback">
<div *ngIf="f['expirationMonth'].errors['required']">Please enter Expiry Month</div>
<div *ngIf="f['expirationYear'].errors['required']">Please enter Expiry Year</div>
<div *ngIf="f['expirationMonth'].errors['minlength']"> Mininimun length should be 1 </div>
<div *ngIf="f['expirationYear'].errors['minlength']"> Mininimun length should be 4 </div>
<div *ngIf="f['expirationMonth'].errors['maxlength']"> Maximum length should be 12 </div>
<div *ngIf="f['expirationYear'].errors['maxlength']"> Mininimun length should be 4 </div>
</div>
</div>
</div>
<div class="form-group ">
<label style="font-size: 15px;">CVV/CVC</label>
<input class="form-control month" formControlName="cardCVVNumber" placeholder="cvv"
[ngClass]="{ 'is-invalid': f['cardCVVNumber'].errors && (f['cardCVVNumber'].dirty || f['cardCVVNumber'].touched)}">
<div *ngIf="paymentForm && f['cardCVVNumber'].errors" class="invalid-feedback">



<div *ngIf="f['cardCVVNumber'].errors['required']">Please enter CVV</div>
<div *ngIf="f['cardCVVNumber'].errors['minlength']"> Mininimun length should be 3 </div>
<div *ngIf="f['cardCVVNumber'].errors['maxlength']"> Maximum length should be 3 </div>
</div>
</div>
<div class="form-group ">
<label style="font-size: 15px;">Toatl Price:</label>

{{allProducts}}
</div>
<div class="form-group">
<button mat-dialog-close [disabled]="paymentForm.invalid" (click)="removeAllProduct()" routerLink="/home"
type="submit" class="btn btn-primary">Pay</button>

</div>
<h3 class="center-block text-center">{{displayMessage}}</h3>
</form>
</div>