表单提交后，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。