title: Validation not working on angular reactive forms
body: <p>I have a simple reactive form and I took the guide from <a href="https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36" rel="nofollow noreferrer">https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36</a> to make the reactive form for validation in angular 9.</p>
  <p>I dont know I posted in stackbliz but I got three links:
  EDITOR URL
  <a href="https://stackblitz.com/edit/angular" rel="nofollow noreferrer">https://stackblitz.com/edit/angular</a></p>
  <p>APP URL
  <a href="https://angular.stackblitz.io" rel="nofollow noreferrer">https://angular.stackblitz.io</a></p>
  <p>EMBED URL
  <a href="https://stackblitz.com/edit/angular?embed=1&amp;file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular?embed=1&amp;file=src/app/app.component.html</a></p>
  <p>If,it is not working please say me where can I get real link.</p>
  <p>app.module.ts</p>
  <pre><code>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 { }
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>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;
    }
      
    }
   
  }
  </code></pre>
  <p>app.component.html</p>
  <pre><code> &lt;form [formGroup]=&quot;checkoutFormGroup&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
                      
                      &lt;!-- Customer info --&gt;
                      &lt;fieldset class=&quot;scheduler-border&quot;&gt;
                          &lt;legend class=&quot;scheduler-border&quot;&gt;&lt;h3&gt;Cusomter&lt;/h3&gt;&lt;/legend&gt;
                          &lt;div formGroupName=&quot;customer&quot;&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;First Name&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;firstName&quot; class=&quot;form-control&quot;/&gt;
                                          &lt;p  *ngIf=&quot;checkoutFormGroup.get('customer').get('firstName').hasError('required') &amp;&amp; !checkoutFormGroup.get('customer').get('firstName').pristine&quot;&gt;
                                             Firstname is required
                                          &lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;Last Name&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;lastName&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;Email Name&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;email&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
  
                      &lt;!-- Shipping info --&gt;
                      &lt;fieldset class=&quot;scheduler-border&quot;&gt;
                          &lt;legend class=&quot;scheduler-border&quot;&gt;&lt;h3&gt;Shipping Address&lt;/h3&gt;&lt;/legend&gt;
                          &lt;div formGroupName=&quot;shippingAddress&quot;&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;Street&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;street&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;City&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;city&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-5 mb-3&quot;&gt;
                                      &lt;label&gt;Country&lt;/label&gt;
                                      &lt;select formControlName=&quot;country&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;United States&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-4 mb-3&quot;&gt;
                                      &lt;label&gt;State&lt;/label&gt;
                                      &lt;select formControlName=&quot;state&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;California&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
                                      &lt;label&gt;Zip&lt;/label&gt;
                                      &lt;input formControlName=&quot;zipcode&quot; type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
                      &lt;br/&gt;
                      &lt;div class=&quot;form-check&quot;&gt;
                          &lt;input type=&quot;checkbox&quot; (change)=&quot;copyShippingAddressToBillingAddress($event)&quot; class=&quot;form-check-input&quot;&gt;
                          &lt;label&gt;Shipping address is the same as my billing address&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;br/&gt;
                      &lt;!-- Billing info --&gt;
                      &lt;fieldset class=&quot;scheduler-border&quot;&gt;
                          &lt;legend class=&quot;scheduler-border&quot;&gt;&lt;h3&gt;Billing Address&lt;/h3&gt;&lt;/legend&gt;
                          &lt;div formGroupName=&quot;billingAddress&quot;&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;Street&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;street&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;City&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;div&gt;
                                          &lt;input type=&quot;text&quot; formControlName=&quot;city&quot; class=&quot;form-control&quot;/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-5 mb-3&quot;&gt;
                                      &lt;label&gt;Country&lt;/label&gt;
                                      &lt;select formControlName=&quot;country&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;United States&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-4 mb-3&quot;&gt;
                                      &lt;label&gt;State&lt;/label&gt;
                                      &lt;select formControlName=&quot;state&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;California&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
                                      &lt;label&gt;Zip&lt;/label&gt;
                                      &lt;input formControlName=&quot;zipcode&quot; type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
  
                      &lt;!-- Credit card info --&gt;
                      &lt;fieldset class=&quot;scheduler-border&quot;&gt;
                          &lt;legend class=&quot;scheduler-border&quot;&gt;&lt;h3&gt;Credit Card&lt;/h3&gt;&lt;/legend&gt;
                          &lt;div formGroupName=&quot;creditCard&quot;&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-3&quot;&gt;
                                      &lt;label&gt;Card Type&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-9&quot;&gt;
                                      &lt;select formControlName=&quot;cardType&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;VISA&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
                                      &lt;label for=&quot;cc-name&quot;&gt;Name on card&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; formControlName=&quot;nameOnCard&quot; class=&quot;form-control&quot; /&gt;
                                      
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
                                      &lt;label for=&quot;cc-number&quot;&gt;Credit card number&lt;/label&gt;
                                      &lt;input type=&quot;text&quot; formControlName=&quot;cardNumber&quot; class=&quot;form-control&quot; /&gt;
                              
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;row form-group&quot;&gt;
                                  &lt;div class=&quot;col-md-5 mb-3&quot;&gt;
                                      &lt;label&gt;Expiration Month&lt;/label&gt;
                                      &lt;select formControlName=&quot;expirationMonth&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;United States&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-4 mb-3&quot;&gt;
                                      &lt;label&gt;Expiration Year&lt;/label&gt;
                                      &lt;select formControlName=&quot;expirationYear&quot; class=&quot;custom-select d-block w-100&quot;&gt;
                                          &lt;option value=&quot;&quot;&gt;Choose...&lt;/option&gt;
                                          &lt;option&gt;California&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-md-3 mb-3&quot;&gt;
                                      &lt;label&gt;CVV&lt;/label&gt;
                                      &lt;input formControlName=&quot;cvv&quot; type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
  
                      &lt;div class=&quot;text-center&quot;&gt;
                          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Purchase&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  </code></pre>
  <p>My validation is not working.Why is it so?</p>