Angular 6 提交验证

Question

我有一种情况，我只需要在提交后验证字段。

因为我有一个非常大的表单，其中包含 FormArrays 和 FormGroup，所以我将表单分成多个组件，以便每个组件代表一个组。此外，我有一个通用组件，用于轻松创建输入 + 验证消息。

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

Answer 1

解决方案 #1

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

解决方案 #2

我是在思考 Material Angular 输入和他们的自定义验证匹配器之后才想到的。我去了源代码，发现在构造函数中传递了基础 class NgForm 和 FormGroupDirective 。过了一会儿，我意识到这是一个依赖注入（在 Angular 中有可能在 dependency injection 的帮助下向上导航树）因此我想出了可以使用 DI 获取 FormGroupDirective/NgForm 其中有 submitted 属性。因此，我们可以在通用输入组件中只有submitted 属性。并更新为

constructor(
  @Optional() private form: NgForm,
  @Optional() private group: FormGroupDirective,
) { }

ngOnInit() {
  this.group.ngSubmit.subscribe(e => {
    this.submittd = this.group.submitted || this.form.submitted;
  });
}

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

StackBlitz

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

按钮 Funny button 仅在控制台打印 NgForm 和 FormGroupDirective 的当前状态。

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

还有一个示例，但带有错误消息 + 输入颜色指示器。 StackBlitz删除值就可以了，然后点击"Submit"查看。

Answer 2

正如您在 this 文章中看到的那样，您可以执行以下操作：

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

Angular 6 提交验证

Angular 6 validation on submit

dependency-injection

typescript

angular

angular-reactive-forms

解决方案 #1

解决方案 #2