提交时如何仅验证表单？答案

【问题标题】：How to only validate a form when submitting it?提交时如何仅验证表单？
【发布时间】：2018-11-22 19:32:13
【问题描述】：

我正在使用这个简单的响应式表单，并且我试图仅在单击“发送数据”按钮时对其进行验证。有人可以告诉我我错过了什么吗？提前非常感谢！

这是我的代码：LIVE DEMO

 get username(){
   return this.registrationFormGroup.get('username');
 }

 get userlastname(){
  return this.registrationFormGroup.get('userlastname');
 }

 get userage(){
  return this.registrationFormGroup.get('userage');
 }

 onSubmit(){
   if(this.registrationFormGroup.valid){
    console.log('Sending data...');
    console.log(this.registrationFormGroup.value);
   }
 }

【问题讨论】：

您想避免什么导致您只希望在提交时进行验证？
我已经对每个字段进行了验证，但我不想在用户单击提交按钮之前验证表单。
如果您使用 ngSubmit，这不会自动发生吗？
@BenSteward 是的，你是对的。但是，问题是如果用户关注字段 1，然后是第二个字段的选项卡，验证会立即执行（我不希望这样）。我只想在单击提交按钮时显示错误消息。希望有意义
我在材质库中看到errorStateMatchers，不知道你是否可以使用类似的东西来短路正常行为。

标签： angular forms

【解决方案1】：

您使用的是field.touched，如果表单提交，您可以使用条件。

使用#form="ngForm"，您可以使用form.submitted 条件。

<form #form="ngForm" [formGroup]="registrationFormGroup" (ngSubmit)="onSubmit()">
    <input [class.is-invalid]="form.submitted && username.invalid" type="text" formControlName="username"><br/>
    <small *ngIf="form.submitted && username.invalid && username.errors.required" style="color:red;">Name is required</small>

    //Rest of your form... 
</form>

你可以在这个DEMO看到

【讨论】：

你能提供一个stackbliz或一个现场演示吗？谢谢