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

【问题标题】：Angular 2 custom form Validation does not prevent onSubmit from being calledAngular 2 自定义表单验证不会阻止调用 onSubmit
【发布时间】：2016-09-22 00:06:37
【问题描述】：

也许我很笨，但我一辈子都无法弄清楚如何让自定义表单验证在验证失败时停止调用 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

我希望有人可以告诉我如何让它正常工作，或者向我指出一些文档，承认这不能像我预期的那样工作。

【问题讨论】：

标签： angular angular2-forms

【解决方案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/

【讨论】：

使用内置验证器时，提交按钮似乎没有触发。最明显的例子是required。如果将其添加到 HTML 的元素中，只要输入字段为空，它就不会调用 onSubmit。我希望我的自定义验证器能够像这样工作。这意味着我想避免将[disabled="!formGroup.valid" 添加到我的提交按钮。

【解决方案2】：

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

希望这对其他人有所帮助。

【讨论】：