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

Question

也许我是愚蠢的,但我不能为我的生活弄清楚如何获得自定义表单验证,从验证失败的情况被称为停止的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);
  }
}

这里是一个与plunkr的链接

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

Answer 1

原来我真的很笨。校验如required，minLength，maxLength，和pattern都是内置的属性<input>元素。这就是它们阻止表单提交的原因：它们是浏览器原生的。另一方面，自定义验证器（您自己添加的验证器）由 Angular 管理，但是当单击提交按钮时，它们无法阻止提交表单。

希望这可以帮助其他人。