我已经使用Reactive forms修复了客户端验证。它很容易开发😀
首先在app.modules.ts文件的imports部分添加ReactiveFormsModule。

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class HomeComponent implements OnInit {

  loginForm :FormGroup;
  submitted=false;
  constructor(private formBuilder: FormBuilder) { 
    this.initializeForm();
  }

  initializeForm()
  {
    this.loginForm = this.formBuilder.group({
      userName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    }); 
  }

  UserLogin()
  {
    this.submitted = true;
    if(this.loginForm.invalid)
    {
      return
    }
  }
}

这就是如何设计component.html文件

<form [formGroup]="loginForm" (ngSubmit)="UserLogin()">

    <div class="form-group">
      <input type="text" class="form-control" [ngClass]="{'is-invalid' :submitted && loginForm.controls['userName'].errors}"
       formControlName="userName" placeholder="Username">
    </div>
    
    <div class="form-group">
      <input type="text" class="form-control mt-2" [ngClass]="{'is-invalid' :submitted && loginForm.controls['email'].errors}" 
      formControlName="email" placeholder="Email">
    </div> 
    
    <button class="btn btn-primary" type="submit">
       <span class="state">Log in</span>
    </button>
    
</form>

在initializeForm()中，我们有userName和email，这些名称应该是.html文件中的formControlName。您可以根据需要添加任意多的字段。这是登录页面的外观

如果您想了解详细信息visit this.