Angular 2 表单提交后显示验证错误

Question

我正在构建模型驱动的 Angular2 表单。我发现的大多数示例都会禁用提交按钮，直到表单有效为止。但是，我不喜欢这种模式，宁愿在提交表单后向用户显示任何潜在的错误。

我比较了提交前后的表单 ControlGroup 数据，没有发现任何差异。

有没有办法确定表单是否已提交，以便我可以显示我的内联验证错误？

Answer 1

暂时没有办法。您可以自己在提交处理程序中设置一个标志。

虽然

正在进行中

见
- https://github.com/angular/angular/issues/2960 - https://github.com/angular/angular/pull/7449

Answer 2

我不认为已接受的答案 - Angular 的相关更新确实回答了这个问题。

可以使用form.submitted吗？标记以查明用户是否已经尝试提交 - 但不会自动显示错误（例如，如果您有必填字段并且用户根本没有在您的表单上输入任何内容而只是点击提交，那么您会期望所有必需的显示所需错误通知的字段）。

这可以按如下方式完成：

  onSubmit() {
    if (this.form.valid) {
      console.log('form submitted');
    } else {
      this.validateAllFormFields(this.form);
    };
  }

  validateAllFormFields(formGroup: FormGroup) { 
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);            
      if (control instanceof FormControl) {            
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {       
        this.validateAllFormFields(control);           
      }
    });
  }

信用和完整解释 here。

Angular 2 表单提交后显示验证错误

Angular 2 display validation errors after form submit

angular2-forms

angular