Angular 2自定义表单验证不会阻止调用onSubmit

也许我是愚蠢但我不能为我的生活弄清楚如何获得自定义表单验证,以便在验证失败时停止onSubmit被调用.在创建新的Control时,我尝试使用 HTML语法(通过将自定义验证关键字直接添加到表单组件的htmlTemplate中)以及代码.我还没有看到任何暗示此功能不适用于自定义验证器的内容.

这是我正在使用的代码示例

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

我希望有人可以告诉我如何使其正常工作,或者指向一些文件,承认这不会像我期望的那样工作.

解决方法

事实证明我确实是愚蠢的.诸如required,minLength,maxLength和pattern之类的验证器都是< input>的内置属性.元件.这就是他们阻止表单提交的原因：它们是浏览器的原生.另一方面,自定义验证器(您自己添加的验证器)由Angular管理,但是当单击提交按钮时,它们无法阻止提交表单.

希望这有助于其他人下线.