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

Question

也许我是个笨蛋，但我终其一生都想不出如何进行自定义表单验证以在验证失败时停止调用 onSubmit。在创建新控件时，我尝试使用 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

我希望有人可以向我展示如何使其正常工作，或者向我指出一些文档，这些文档承认这并不像我期望的那样工作。

Answer 1

原来我是个笨蛋。验证器，例如 required , minLength , maxLength , 和 pattern都是 <input> 的内置属性元素。这就是它们阻止表单提交的原因:它们是浏览器原生的。另一方面，自定义验证器(您自己添加的验证器)由 Angular 管理，但它们无法停止表单在单击提交按钮时提交。

希望这对其他人有帮助。