Validation not working on angular reactive forms

Question

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

 
                    
                    
                    
                        Cusomter
                        
                            
                                
                                    First Name
                                
                                
                                    
                                        
                                        
                                           Firstname is required
                                        
                                    
                                
                            
                            
                                
                                    Last Name
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                    Email Name
                                
                                
                                    
                                        
                                    
                                
                            
                        
                    

                    
                    
                        Shipping Address
                        
                            
                                
                                    Street
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                    City
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                    Country
                                    
                                
                                
                                    State
                                    
                                
                                
                                    Zip
                                    
                                
                            
                        
                    
                    

                    
                        
                        Shipping address is the same as my billing address
                    
                    

                    
                    
                        Billing Address
                        
                            
                                
                                    Street
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                    City
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                    Country
                                    
                                
                                
                                    State
                                    
                                
                                
                                    Zip
                                    
                                
                            
                        
                    

                    
                    
                        Credit Card
                        
                            
                                
                                    Card Type
                                
                                
                                    
                                
                            
                            
                                
                                    Name on card
                                    
                                    
                                
                                
                                    Credit card number
                                    
                            
                                
                            
                            
                                
                                    Expiration Month
                                    
                                
                                
                                    Expiration Year
                                    
                                
                                
                                    CVV

My validation is not working.Why is it so?

mbojko · Accepted Answer

It 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):


    Firstname is required

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:

and change the condition to


        Firstname is required

Validation not working on angular reactive forms

Answers (1)

Related Questions