表单提交后，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);           
      }
    });
  }

这里有信用和完整的解释。