I have a simple reactive form and I took the guide from https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36 to make the reactive form for validation in angular 9.
I dont know I posted in stackbliz but I got three links: EDITOR URL https://stackblitz.com/edit/angular
APP URL https://angular.stackblitz.io
EMBED URL https://stackblitz.com/edit/angular?embed=1&file=src/app/app.component.html
If,it is not working please say me where can I get real link.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule , ReactiveFormsModule],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder,Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
checkoutFormGroup: FormGroup;
name = 'Angular';
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.checkoutFormGroup = this.formBuilder.group({
customer: this.formBuilder.group({
firstName: ['',Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.required]
}),
shippingAddress: this.formBuilder.group({
street: [''],
city: [''],
state: [''],
country: [''],
zipcode: ['']
}),
billingAddress: this.formBuilder.group({
street: [''],
city: [''],
state: [''],
country: [''],
zipcode: ['']
}),
creditCard: this.formBuilder.group({
cardType: [''],
nameOnCard: [''],
cardNumber: [''],
cvv: [''],
expirationMonth: [''],
expirationYear: ['']
})
})
console.log(this.checkoutFormGroup);
}
onSubmit() {
if (this.checkoutFormGroup.invalid) {
return;
}
}
}
app.component.html
<form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()">
<!-- Customer info -->
<fieldset class="scheduler-border">
<legend class="scheduler-border"><h3>Cusomter</h3></legend>
<div formGroupName="customer">
<div class="row form-group">
<div class="col-md-3">
<label>First Name</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="firstName" class="form-control"/>
<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') && !checkoutFormGroup.get('customer').get('firstName').pristine">
Firstname is required
</p>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3">
<label>Last Name</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="lastName" class="form-control"/>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3">
<label>Email Name</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="email" class="form-control"/>
</div>
</div>
</div>
</div>
</fieldset>
<!-- Shipping info -->
<fieldset class="scheduler-border">
<legend class="scheduler-border"><h3>Shipping Address</h3></legend>
<div formGroupName="shippingAddress">
<div class="row form-group">
<div class="col-md-3">
<label>Street</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="street" class="form-control"/>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3">
<label>City</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="city" class="form-control"/>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-5 mb-3">
<label>Country</label>
<select formControlName="country" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>United States</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label>State</label>
<select formControlName="state" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>California</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label>Zip</label>
<input formControlName="zipcode" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<br/>
<div class="form-check">
<input type="checkbox" (change)="copyShippingAddressToBillingAddress($event)" class="form-check-input">
<label>Shipping address is the same as my billing address</label>
</div>
<br/>
<!-- Billing info -->
<fieldset class="scheduler-border">
<legend class="scheduler-border"><h3>Billing Address</h3></legend>
<div formGroupName="billingAddress">
<div class="row form-group">
<div class="col-md-3">
<label>Street</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="street" class="form-control"/>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-3">
<label>City</label>
</div>
<div class="col-md-9">
<div>
<input type="text" formControlName="city" class="form-control"/>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-5 mb-3">
<label>Country</label>
<select formControlName="country" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>United States</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label>State</label>
<select formControlName="state" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>California</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label>Zip</label>
<input formControlName="zipcode" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<!-- Credit card info -->
<fieldset class="scheduler-border">
<legend class="scheduler-border"><h3>Credit Card</h3></legend>
<div formGroupName="creditCard">
<div class="row form-group">
<div class="col-md-3">
<label>Card Type</label>
</div>
<div class="col-md-9">
<select formControlName="cardType" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>VISA</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" formControlName="nameOnCard" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" formControlName="cardNumber" class="form-control" />
</div>
</div>
<div class="row form-group">
<div class="col-md-5 mb-3">
<label>Expiration Month</label>
<select formControlName="expirationMonth" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>United States</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label>Expiration Year</label>
<select formControlName="expirationYear" class="custom-select d-block w-100">
<option value="">Choose...</option>
<option>California</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label>CVV</label>
<input formControlName="cvv" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<div class="text-center">
<button type="submit" class="btn btn-primary">Purchase</button>
</div>
</form>
My validation is not working.Why is it so?
