Angular 2 custom form Validation does not prevent onSubmit from being called

Question

Perhaps I am being dumb but I cannot for the life of me figure out how to get custom form validation to stop onSubmit from being called when the validation fails. I've tried using both the HTML syntax (by adding the custom validation keyword directly into the htmlTemplate of the form component) as well as through the code, when creating a new Control. I also haven't seen anything that suggests this feature shouldn't work for custom validators.

Here's an example of the code I'm using

import { Component, Output, EventEmitter, OnInit } from 'angular2/core';
import { FORM_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common';

@Component({
  selector: 'formality-form',
  templateUrl: 'html/formality.html',
  styleUrls: ['styles.css']
})
export class FormalForm implements OnInit {
  formGroup: ControlGroup;

  // Here I register the custom validator to the Control group
  constructor(fb: FormBuilder) {
    this.formGroup = fb.group({
      'date': ['']
    } {validator: FormalForm.customVal});
  }

  // This is my custom validator
  public static customVal(control: ControlGroup){
    return {isFail:true};
  }

  // I would like for this to never be called, since the custom validator is in
  // a state of perpetual fail.
  onSubmit(): void {
    console.log(this.formGroup.value);
    alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid);
  }
}

And here's a link to the plunkr

I'm hoping someone can either show me how to get this working correctly, or point me towards some documentation that acknowledges this doesn't work as I'm expecting.

Answer 1

Turns out I am indeed dumb. Validators such as required, minLength, maxLength, and pattern are all built-in attributes of the <input> element. This is why they prevent form submission: they're native to the browser. On the otherhand, custom validators (ones that you add yourself) are managed by Angular, but they cannot stop a form from being submitted when the submit button is clicked.

Hope this helps someone else down the line.

Answer 2

In fact you need to check the validity of the form:

• To disable the submit button

  <button type="submit" [disabled]="!formGroup.valid">Submit</button>
  

• Not to execute processing in your onSubmit method

  onSubmit(): void {
    if (this.formGroup.valid) { // <-----
      console.log(this.formGroup.value);
      alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid);
    }
  }
  

The submit event will be always fired when clicking on a submit button.

Some other criteria can prevent from submitting form like pending asynchronous validations.

See this article for more details:

• http://restlet.com/blog/2016/02/22/implementing-angular2-forms-beyond-basics-part-3/