也许我是愚蠢的但是我不能为我的生活找出如何获得自定义表单验证以在验证失败时停止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
我希望有人可以告诉我如何正常工作，或者指出一些文件，承认这并不像我期望的那样有用。
答案 0 :(得分：4)
原来我确实是愚蠢的。 required，minLength，maxLength和pattern等验证程序都是<input>元素的内置属性。这就是他们阻止表单提交的原因：他们是浏览器的原生。另一方面，自定义验证器（您自己添加的验证器）由Angular管理，但它们无法停止单击提交按钮时提交的表单。
希望这有助于其他人下线。
答案 1 :(得分：1)
实际上你需要检查表格的有效性：
禁用提交按钮
subController.textToDisplay.set(LocalDate.parse(db.getText(), DATE_FORMATTER));
不要在<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);
}
}
事件。
其他一些标准可能会阻止提交表单，例如挂起的异步验证。
有关详细信息，请参阅此文章：