不要在模糊时以角度 2 触发表单验证答案

【问题标题】：Do not fire Form Validation in angular 2 on blur不要在模糊时以角度 2 触发表单验证
【发布时间】：2016-04-20 09:27:46
【问题描述】：

我能够在 Angular 2 中集成表单验证。

我正在使用form = formBuilder.group({...}) 方法。

验证效果很好。但我希望仅在单击提交时触发验证。目前默认情况下，当用户从输入模糊时它会触发。如何停止触发模糊验证并手动触发。

编辑：

使用*ngIf 或[hidden] 的问题是它们可以很好地使用变量来跟踪表单提交。但验证仅在我从输入模糊时触发。以其他方式，当用户没有访问输入时验证不会触发。

【问题讨论】：

标签： validation angular

【解决方案1】：

您需要将自定义 formSubmitted 属性集成到您的表达式中以显示错误。例如：

<span *ngIf="formSubmitted && form.controls.someCtrl.errors?.someerror">
  Some message
</span>

默认值为false，并在提交表单时设置为true。

@Component({
  (...)
  template: `
    <form (ngSubmit)="onFormSubmitted()">
    </form>
  `
})
export class SomeComponent {
  formSubmitted: boolean = false;

  onFormSubmitted() {
    this.formSubmitted = true;
  }
}

【讨论】：

您可以利用touched 属性：form.touched。
是的，这是另一个问题。我使用的是touched property。从某种意义上说，只有在触摸时才会显示。

【解决方案2】：

仅在设置提交的平面时显示错误：

 <form (ngSubmit)="submit()" ...>
 <input ngControl="name" #name="ngForm" type="text">
 <span [hidden]="name.valid && isSubmitted"><b>Required</b></span>
 </form>

class MyComponent {
  isSubmitted:boolean = false;

  submit() {
    this.isSubmitted = true;
  }
}

【讨论】：

我不明白这个问题。也许你正面临一个不同的问题。目前，当需要输入数字时，空输入不会使其无效，否则，必填字段在未访问时无效。
是的，那是另一个问题。我使用的是 touched 属性。