提交时进行Angular 6验证

Question

我遇到的情况是，仅在提交后才需要验证字段。

由于我的FormArrays和FormGroup具有很大的表单，因此我将表单分为多个组件，以便每个组件在组中表示。 此外，我有一个通用组件，可用于轻松创建Input + Validation消息。

但是，Angular会在您键入时立即验证表单，并且没有默认选项可在提交后开始验证。

Answer 1

解决方案＃1

首先且非常易于使用的是在父组件上具有一些属性，例如submitted = false（在用户提交表单时变为true（手动））。然后将其向下传递，直到通过许多@Input()到达我的常规输入组件为止。然后，我不得不使用它并在ngIf中使用它作为显示错误的额外条件。

---

解决方案2

在思考了Material Angular输入及其自定义验证匹配器之后，我来到了它。我去了源代码，发现在构造函数中传递了基类NgForm和FormGroupDirective。一段时间后，我意识到这是一个依赖项注入（在Angular中，有可能借助dependency injection向上导航树），因此我想到了可以使用DI来获取具有{的FormGroupDirective / NgForm的解决方案。 {1}}属性。因此，我们可以在常规输入组件中仅具有submitted属性 。并像这样更新

submitted

我创建了一个小示例，以了解如何跟踪该属性。

StackBlitz

首先，打开控制台并查看初始FormGroupDirective状态。

按钮constructor( @Optional() private form: NgForm, @Optional() private group: FormGroupDirective, ) { } ngOnInit() { this.group.ngSubmit.subscribe(e => { this.submittd = this.group.submitted || this.form.submitted; }); } 仅在NgForm和FormGroupDirective的控制台当前状态下打印。

第二，按提交按钮。 ngSubmit事件已触发并已成功跟踪。然后按Funny button并查看更新的Funny button状态（在FormGroupDirective上）。

还有另一个示例，但是带有错误消息+输入颜色指示器。 StackBlitz只需删除值，然后单击“提交”进行检查即可。

Answer 2

您可以在this文章中看到，您可以执行以下操作：

this.login = new FormGroup({
   email: new FormControl(),
   password: new FormControl()
}, { updateOn: 'submit' });