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

Tushar Walzade
– Tushar Walzade

2019-03-08 10:19:28 +00:00
Commented Mar 8, 2019 at 10:19 — Tushar Walzade
– Tushar Walzade, Commented Mar 8, 2019 at 10:19
Is it possible to add (some of) your html for completeness?

John
– John

2019-03-08 10:25:38 +00:00
Commented Mar 8, 2019 at 10:25 — John
– John, Commented Mar 8, 2019 at 10:25

Johan Rin · Accepted Answer · 2019-03-08 10:38:14Z

7

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) {
        ...
    }
}

answered Mar 8, 2019 at 10:38

Johan Rin

1,9483 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4676340 · Accepted Answer · 2019-03-08 10:23:01Z

6

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;
  }
}

answered Mar 8, 2019 at 10:23

user4676340

Collectives™ on Stack Overflow

How to validate form input on submit in Angular 6

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related