Notes

html:

<div class="p">
<steps></steps>
<div class="header bg-primary">total fare: ₹{{totalf}}/- </div>
<form class="pay" #pay="ngForm" (ngSubmit)="onsubmit(pay)">
<div class="form">
<div class="inline">
<label class="tag" for="cardtype">Card Type: </label>
<div class="radio">
<input
ngModel
name="cardtype"
type="radio"
value="visa"
>
<label>Visa</label>
</div>
</div>
<div class="radio">
<input
ngModel
name="cardtype"
type="radio"
value="mastercard"
>
<label >Mastercard</label>
</div>
<div class="form-group">
<label for="name"></label>
<input
style="width: 400px;margin-top:-13px"
required
ngModel
#name="ngModel"
name="name"
type="text"
class = "form-control"
placeholder="name on card">
<div *ngIf="name.invalid && name.touched" class="text-danger">
<small *ngIf="name.errors.required ">please enter your name</small>
</div>
</div>
<div class="form-group">
<label for="cardnumber" ></label>
<input
style = "width: 400px;margin-top: -13px;"
required
minlength="16"
maxlength="16"
pattern="^d{16}$"
ngModel
#cardnumber="ngModel"
name="cardnumber"
type="number"
class = "form-control"
placeholder="16-digit card number">
<div *ngIf="cardnumber.touched && !cardnumber.valid" class="text-danger">
<small *ngIf="cardnumber.errors.required">please enter your card number</small>

<small *ngIf=" cardnumber.errors.pattern">please enter valid card number</small>
</div>
</div>
<div class="grp form-inline">
<div class="form-group">
<label for="cvv" ></label>
<input
style="width: 100px; margin-right: 5px;"
required
minlength="3"
maxlength="3"
pattern="^d{3}$"
ngModel
#cvv="ngModel"
name="cvv"
type="number"
class = "form-control"
placeholder="cvv">
<div *ngIf="cvv.touched && !cvv.valid" class="text-danger">
<small *ngIf="cvv.errors.required">please enter your cvv</small>
<small *ngIf=" cvv.errors.pattern">please enter valid cvv</small>
</div>
</div>
<div class="from-group">
<select
style="width: 100px;margin-right: 5px;"
required
class="form-control"
ngModel
#month="ngModel"
name=" month"
id="month"
type="month" >

<option value='' selected disabled hidden>month</option>
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
<option>may</option>
<option>jun</option>
<option>jul</option>
<option>aug</option>
<option>sept</option>
<option>oct</option>
<option>nov</option>
<option>dec</option>
</select>
<small *ngIf="month.touched && !month.valid" class="text-danger">
</small>
</div>
<div class="from-group">
<select
style="width: 100px;margin-right: 5px;"
required
class="form-control"
ngModel
#year="ngModel"
name="year"
id="year"
type="month" >
<option value='' selected disabled hidden>year</option>
<option>2024</option>
<option>2023</option>
<option>2022</option>
<option>2021</option>
</select>
<small *ngIf="year.touched && !year.valid" class="text-danger">
</small>
</div>
</div>
<div class="form-inline">
<button style="margin-right: 10px;" class="btn btn-success" [disabled]="!pay.valid" (click)="viewticket()" type="submit">pay now</button>
<button class="btn btn-danger" [disabled]="!pay.valid" (click)="cancel()" type="submit">cancel</button>
</div>
</div>

</form>
</div>

CSS:

.p{
position: fixed;
margin: 0px auto;
top:20%;
left:20%;
width: 70%;
height: 70%;
border-radius: 1rem;
box-sizing: border-box;
background: rgba(255, 255,255, .2);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
padding: 15px;
color:black;
font-weight: bolder;
}
.header{
padding: 3px;
margin-top: 20px;
margin-left: 30px;
background-color: blue;
height: 30px;
border-radius: 0.5rem;
}
.inline{
display: inline;
}
.tag{
margin-right: 3px;
}
.radio{
display: inline;
margin-right: 15px;
margin-left:2px;
padding: 2px;
}
form{
margin-top: 20px;
margin-left: 30px;
}
.form-control.ng-touched.ng-invalid{
border: 2px solid red;
}
.form-control.ng-valid{
border: 3px solid green;
}
.grp{
margin-right:10px;
margin-bottom: 15px;
}

TS FILE:

import { BusService } from './../bus.service';
import { Router } from '@angular/router';
import { Component, OnInit ,Input} from '@angular/core';
import { FormControl,FormGroup,NgForm,NgModel } from "@angular/forms";


@Component({
selector: 'pay',
templateUrl: './pay.component.html',
styleUrls: ['./pay.component.css']
})
export class PayComponent implements OnInit {

totalf;
seatDetails;
buses;

constructor( private route:Router, private getbus: BusService) {
this.totalf = this.route.getCurrentNavigation().extras.state;

}

ngOnInit(): void {
}
onsubmit(pay:NgForm){
pay.valid
}
viewticket(){

this.route.navigate(['/ticket'],{state:this.totalf});



console.log(this.totalf)

}
cancel(){
this.route.navigateByUrl('/plan');

}



}

SPEC.TS:
import { BusService } from './../bus.service';
import { Router } from '@angular/router';
import { Component, OnInit ,Input} from '@angular/core';
import { FormControl,FormGroup,NgForm,NgModel } from "@angular/forms";


@Component({
selector: 'pay',
templateUrl: './pay.component.html',
styleUrls: ['./pay.component.css']
})
export class PayComponent implements OnInit {

totalf;
seatDetails;
buses;

constructor( private route:Router, private getbus: BusService) {
this.totalf = this.route.getCurrentNavigation().extras.state;

}

ngOnInit(): void {
}
onsubmit(pay:NgForm){
pay.valid
}
viewticket(){

this.route.navigate(['/ticket'],{state:this.totalf});



console.log(this.totalf)

}
cancel(){
this.route.navigateByUrl('/plan');

}



}