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

事实上你需要检查表格的有效性：

禁用提交按钮

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

不要在您的 onSubmit 方法中执行处理

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

单击提交按钮时将始终触发 submit 事件。

一些其他条件可以阻止提交表单，例如挂起的异步验证。

有关详细信息，请参阅本文：

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

Answer 2

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

希望这对其他人有帮助。

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

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

angular2-forms

angular