Notes

payment-button Html

<button mat-raised-button (click)="onCreate()">Payment</button>

payment-button TS

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatDialogConfig } from '@angular/material/dialog';
import { PaymentCardComponent } from '../payment-card/payment-card.component';
@Component({
selector: 'app-payment-button',
templateUrl: './payment-button.component.html',
styleUrls: ['./payment-button.component.css']
})
export class PaymentButtonComponent implements OnInit {

constructor(private dialog:MatDialog) { }

ngOnInit(): void {
}
onCreate(){
const dialogConfig=new MatDialogConfig();
dialogConfig.width="50%";
this.dialog.open(PaymentCardComponent,dialogConfig);
}
}


payment-card Html

<div class="register-form">
<form [formGroup]="paymentForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name on Card</label>
<input type="text" formControlName="nameOnCard" class="form-control" placeholder="Card Holder Name" [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>Card Number</label>
<input type="number" formControlName="cardNumber" class="form-control" placeholder="1234123412341234" [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>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>CVV/CVC</label>
<input class="form-control month" type="number" formControlName="cardCVVNumber" placeholder="123" [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">
<button [disabled]="paymentForm.invalid" type="submit" class="btn btn-primary">Pay</button>
</div>
<h3 class="center-block text-center">{{displayMessage}}</h3>
</form>
</div>

Payment-card TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'app-payment-card',
templateUrl: './payment-card.component.html',
styleUrls: ['./payment-card.component.css']
})
export class PaymentCardComponent implements OnInit {
paymentForm!: FormGroup;
displayMessage!: string;

constructor(private formBuilder: FormBuilder) {

/* Declare Reactive Form Group here */

}

ngOnInit() {
this.buildForm();
}

buildForm() {
this.paymentForm = this.formBuilder.group({
nameOnCard: ['',
[Validators.required,
Validators.minLength(1),
Validators.pattern('^[A-Za-z][A-Za-z -]*$')
]
],
cardNumber: ['',
[Validators.required,
Validators.minLength(16),
Validators.min(1111111111111111),
Validators.max(9999999999999999)
]
],
expirationMonth: ['',
[
Validators.required,
Validators.minLength(1),
Validators.maxLength(2),
Validators.min(1),
Validators.max(12)
]
],
expirationYear: ['',
[
Validators.required,
Validators.minLength(4),
Validators.maxLength(4),
Validators.min(1111),
Validators.max(9999)
]
],
cardCVVNumber: ['',
[Validators.required,
Validators.minLength(3),
Validators.maxLength(3),
Validators.min(111),
Validators.max(999)
]
]
});
}

// convenience getter for easy access to form fields
get f() { return this.paymentForm.controls; }

onSubmit() {
this.submitForm();
}

submitForm() {
/* Change the display message on button click / submit form */
// stop here if form is invalid
if (this.paymentForm.invalid) {
this.displayMessage = "Payment Failed!";
return;
}
this.displayMessage = "Payment Successful!";
}

}

payment-card CSS
.register-form{
width: 50%;
margin-left: auto;
margin-right: auto;
}
.register-form .form-group{
margin: 20px;
}
.form-group button{
width: 100%;
}
.form-group .date{
display: flex;
}
/* .form-control.ng-touched.ng-valid{
border: 2px solid green;
} */