以 Angular 形式对空字段进行客户端验证答案

【问题标题】：Client side validation in Angular form for empty fields以 Angular 形式对空字段进行客户端验证
【发布时间】：2023-01-28 01:14:37
【问题描述】：

我创建了一个带有form 标签的登录页面，我希望在用户单击“提交”按钮时进行客户端验证，但没有任何反应，Checkform 方法没有被触发。这是我的代码

 <div>
    <form class="login">
      <p class="title">Log in</p>
      <input type="text" class="form-control id="username" id="txtUsername" required>
      <div class="invalid-feedback">
        Please provide Username
      </div>
      <input  class="form-control type="text" id="email" id="txtPass" required>
      <div class="invalid-feedback">
        Please provide Password
      </div>
      <br>            
      <button type="button" onclick="Checkform()">
        <span class="state">Log in</span>
      </button>
    </form>
 </div>

我已经添加了bootstrap 类用于验证，还在.ts 文件中添加了一个方法，当我点击提交按钮时应该触发

 <div class="invalid-feedback">
     Please provide Username
 </div>

 <div class="invalid-feedback">
    Please provide Password
 </div>

  Checkform(){
    var form = document.getElementsByClassName('login')[0] as HTMLFormElement;
    if (form.checkValidity() === false) {
      
    }
    form.classList.add('was-validated');
  }

如何对空字段进行客户端验证并在用户单击“提交”按钮时触发方法？

【问题讨论】：

有什么理由不在这里使用角度形式吗？您将免费获得此功能 angular.io/guide/forms-overview

标签： angular twitter-bootstrap angular14

【解决方案1】：

我已使用Reactive forms 修复了客户端验证。它很容易开发?

首先在app.modules.ts文件的imports部分添加ReactiveFormsModule。在你的component.ts文件中写下代码

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.

【讨论】：