title: How to validate form input on submit in Angular 6
body: <p>In my Angular application, I have my form validators setup, but what I want is the form validation to be done <code>onSubmit</code>. So when the user clicks submit and the form is not valid then the <code>ngIf</code> errors get shown. My code so far is:</p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ReactiveFormsModule } from '@angular/forms';
  import { FormGroup, FormControl } from '@angular/forms';
  import { Validators } from '@angular/forms';
  import { FormBuilder } from '@angular/forms';
  import { Request } from '../../models/request.model'
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs';
  import { AppComponent } from '../../../app.component';
  import { ServicenowService } from '../../services/servicenow.service';
  import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
  
  
  @Component({
    selector: 'app-service-request',
    templateUrl: './service-request.component.html',
    styleUrls: ['./service-request.component.scss']
  })
  export class ServiceRequestComponent implements OnInit {
  
  
    public loading = false;
  
    private customer_id = this.appComponent.customer_id;
  
    serviceForm;
  
    u_destination_country = [
      { value: 'Choose an option' },
      { value: 'United Kingdom', },
      { value: 'United States of America', },
      { value: 'Russia', },
      { value: 'Moscow', },
      { value: 'Africa', },
    ];
  
    users = [
      { id: 'Select an option', },
      { id: '1', },
      { id: '2', },
      { id: '3', },
    ];
  
    devices = [
      { id: 'Select an option', },
      { id: '1', },
      { id: '2', },
      { id: '3', },
    ];
  
    constructor(private service: ServicenowService,
      private appComponent: AppComponent,
      private router: Router,
      private http: HttpClient
  
    ) {
    }
  
    ngOnInit() {
      this.serviceForm = new FormGroup({
        customer_id: new FormControl(this.customer_id),
        //u_caller_id: new FormControl(this.users[0], Validators.required),
        siebel_id: new FormControl('', Validators.required),
        u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
        u_phone_number: new FormControl('', Validators.required),
        //u_serial_number: new FormControl(this.devices[0], Validators.required),
        u_short_description: new FormControl('', Validators.compose([
          Validators.required,
          Validators.minLength(5),
          Validators.maxLength(80)
        ])),
        u_message_description: new FormControl('', Validators.required),
      });
    }
  
    onSubmit() {
      this.http.post("/api/inc",
        this.serviceForm.value,
        {
          headers: new HttpHeaders().set("Content-Type", "application/json")
        }
      ).subscribe((response: any) =&gt; {
        console.log(response);//On success response
        this.router.navigate(['/incident/confirmation']);
      }, (errorResponse: any) =&gt; {
        console.log(errorResponse);//On unsuccessful response
      });
    }
  }
  </code></pre>