Question

我正在使用此简单的反应形式，并且仅在单击“发送数据” 按钮时才尝试对其进行验证。有人可以告诉我我想念的东西吗？提前非常感谢！

这是我的代码：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);
   }
 }

Answer 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

中看到

如何仅在提交表单时验证表单？

1 个答案: