Question

大家早上好，

我希望使用ng5表单实现以下行为：

当客户触摸表单控件且输入无效时，表单控件应标记为无效
如果客户未触及任何表单控件，然后点击“提交”，则应验证所有表单控件
提交按钮应始终处于活动状态。我不太喜欢“禁用提交按钮直到一切正常”理论导致它没有告诉用户他的输入有什么问题

因此，对onchange的验证工作正常，但我缺少的是“form.validate（）”方法。此外，新的“updateOn”功能无法解决此问题，因此它是一个或者解决方案，而不是提交和更改验证的组合。

我找到的唯一解决方案是自己开发一个validate（）方法，它迭代表单的所有控件。

也许有人对我有所了解？：）

谢谢＆amp;最好，迈克尔

Answer 1

表单是一个控件树，只要一个控件变为无效，它的所有祖先都会变为无效。
每当控件的输入发生变化时（假设你确实应用了验证器），控件和的有效性就会更新。
因此，当您点击Submit时，您实际上不需要再次运行验证（因为它在每次输入更改时运行）。
“运行验证”所需的只是检查表单是否有效。您可以通过访问根valid的{{1}}属性来执行此操作：

FormGroup

Answer 2

使用Reactive Forms会很好。你可以实现这里提到的一切.. https://toddmotto.com/angular-2-forms-reactive

1. Validation: 
  this.rForm = formBuilder.group({
      'email': ['', Validators.compose([Validators.required, Validators.email])] ....

2. Touch events 
  <div *ngIf="!rForm.controls.email.valid && rForm.controls['email'].touched" class="alert-danger form-alert-bg">
                  <span *ngIf="rForm.controls.email.errors?.required">
                    Email is Required*
                  </span> </div>

3. Disable submit:
  <button type="submit" [disabled]="!rForm.valid || response.success"
                    class="btn btn--circle btn-primary submit-property__button" title="Save">

            </button>

Answer 3

您可以使用 ReactiveForms 。

您可以将控件（每个html输入）添加到一个组，使用其验证程序检查它们是否有效。它会处理下面和提交事件中的所有验证逻辑，只需检查表单即可

form.group.valid

此外，您可以单独检查每个控件以查看其值是否已更改，用户是否已单击等等。

此处有更多信息https://angular.io/guide/reactive-forms

*注意：我无法添加评论，这就是我将此作为答案的原因。

Answer 4

可能为时已晚，您可以尝试使用此库： https://github.com/gio-js/AngularValidator

它具有不显眼的验证和一系列服务方法，可用于随时验证控件。不幸的是，我认为它没有用于验证更改事件的内置行为。

Angular 5中的良好表单验证

4 个答案: