How to validate form input on submit in Angular 6

Question

In my Angular application, I have my form validators setup, but what I want is the form validation to be done onSubmit. So when the user clicks submit and the form is not valid then the ngIf errors get shown. My code so far is:

Component.ts

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) => {
      console.log(response);//On success response
      this.router.navigate(['/incident/confirmation']);
    }, (errorResponse: any) => {
      console.log(errorResponse);//On unsuccessful response
    });
  }
}

Check [this](http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example) — Tushar Walzade, Mar 08 '19 at 10:19

score 6 · Accepted Answer · answered Mar 08 '19 at 10:23

To protect at template level, you can use

<button type="submit" [disabled]="serviceForm.invalid">Submit</submit>
<div class="error" *ngIf="serviceForm.hasError('yourErrorName')">
 Some text
</div>

At component level, it goes like this

onSubmit() {
  if(this.serviceForm.invalid) {
    this.serviceForm.setErrors({ ...this.serviceForm.errors, 'yourErrorName': true });
    return;
  }
}

score 6 · Answer 2 · answered Mar 08 '19 at 10:38

You can use the updateOn property to tell Angular to run the validation function on submit.

Simply add the property (which can also be applied to a formControl or a formArray) :

this.serviceForm = new FormGroup({
     customer_id: new FormControl(this.customer_id),
         ...
}, { updateOn: 'submit' });

and also don't forget to protect your submit function:

onSubmit() {
    if (this.serviceForm.valid) {
        ...
    }
}

How to validate form input on submit in Angular 6

2 Answers2

Linked