I have a simple reactive form and I took the guide from /@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
APP URL
EMBED URL ;file=src/app/appponent.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 './appponent';
import { HelloComponent } from './helloponent';
@NgModule({
imports: [ BrowserModule, FormsModule , ReactiveFormsModule],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
appponent.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder,Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './appponent.html',
styleUrls: [ './appponent.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;
}
}
}
appponent.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?
I have a simple reactive form and I took the guide from https://medium./@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./edit/angular
APP URL https://angular.stackblitz.io
EMBED URL https://stackblitz./edit/angular?embed=1&file=src/app/app.ponent.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.ponent';
import { HelloComponent } from './hello.ponent';
@NgModule({
imports: [ BrowserModule, FormsModule , ReactiveFormsModule],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.ponent.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder,Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.ponent.html',
styleUrls: [ './app.ponent.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.ponent.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?
Share Improve this question asked Jun 26, 2020 at 16:42 Random guyRandom guy 9234 gold badges19 silver badges42 bronze badges 2- How is it not working? – MikeOne Commented Jun 26, 2020 at 17:04
- Please see it i dont get validation message when thne input is empty and i ckick submit button. – Random guy Commented Jun 26, 2020 at 17:08
1 Answer
Reset to default 3It does work exactly as ordered: the error message is displayed if and only if the field has error "required" and the field isn't pristine (i.e. is dirty):
<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') && !checkoutFormGroup.get('customer').get('firstName').pristine">
Firstname is required
</p>
Clicking on the submit button doesn't make that control dirty, therefore the error message has no reasons to appear.
If you want the message to appear also after submit being clicked, you can, for example, declare a template reference to the form element:
<form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()" #formGroupRef="ngForm">
and change the condition to
<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') &&
(checkoutFormGroup.get('customer').get('firstName').dirty || formGroupRef.submitted)">
Firstname is required
</p>