角度表单验证空白 - Javascript

本文将介绍在使用 Angular 框架开发 web 应用时如何进行表单验证，特别是如何验证空白。本文将逐步介绍该过程需要的基础知识，并给出相应的代码示例。

知识储备

开始学习之前，你需要掌握以下技能：

• HTML 和 CSS 基础知识
• Javascript 基础知识
• Angular 框架及其基础知识
• 熟悉 Angular 表单模块

表单验证空白

在表单中，我们经常需要验证输入域是否为空。Angular 提供了各种内置的验证器，包括 required 验证器，用于确保必填项不为空。

基本应用

将 required 属性添加到 HTML 中的输入组件中即可使用这个验证器。例如，下面是一个带有两个必填项的表单：

<form>
  <input type="text" name="firstName" required>
  <input type="text" name="lastName" required>
  <button type="submit">提交</button>
</form>

在输入框为空时，Angular 会自动给出错误消息。可以使用 ngModel 指令在控制器中访问表单控件。

下面是相关的控制器代码：

@Component({
  selector: 'app-form',
  template: `
    <div>
      <form #f="ngForm">
        <input type="text" name="firstName" [(ngModel)]="firstName" required />
        <input type="text" name="lastName" [(ngModel)]="lastName" required />
        <button type="submit">提交</button>
      </form>
    </div>
  `,
})
export class AppComponent {
  firstName: string;
  lastName: string;

  onSubmit() {
    console.log('提交表单');
  }
}

在 angular 中，我们可以通过指令和生命周期事件来检查表单的验证状态，如：

• ngForm: 指示一个表单控制器的容器
• ngFormControl, ngModel: 指示表单控制器
• ngSubmit: 表单「submit」事件

下面是实现表单验证的一个示例：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input type="text" name="firstName" ngModel required>
  <input type="text" name="lastName" ngModel required>
  <button type="submit">提交</button>
</form>

<p *ngIf="!f.form.valid">表单不合法</p>

@Component({
  selector: 'app-form',
  template: `
    <div>
      <form #f="ngForm" (ngSubmit)="onSubmit(f)">
        <input type="text" name="firstName" [(ngModel)]="firstName" required />
        <input type="text" name="lastName" [(ngModel)]="lastName" required />
        <button type="submit">提交</button>
      </form>
      <p *ngIf="!f.form.valid">表单不合法</p>
    </div>
  `,
})
export class AppComponent {
  firstName: string;
  lastName: string;

  onSubmit(f: NgForm) {
    console.log('提交表单');
  }
}

自定义验证器

除了内置的验证器外，我们还可以自定义自己的验证器。下面是一个示例，用于确保两个输入的密码匹配：

<form [formGroup]="form">
  <input type="password" formControlName="password">
  <input type="password" formControlName="confirmPassword">
  <button type="submit">提交</button>
</form>

<p *ngIf="form.hasError('passwordsNotMatch')">密码不匹配</p>

@Component({
  selector: 'app-form',
  template: `
    <div>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input type="password" formControlName="password" required />
        <input type="password" formControlName="confirmPassword" required />
        <button type="submit">提交</button>
      </form>
      <p *ngIf="form.hasError('passwordsNotMatch')">密码不匹配</p>
    </div>
  `,
})
export class AppComponent {
  form: FormGroup = new FormGroup({
    password: new FormControl('', Validators.required),
    confirmPassword: new FormControl('', Validators.required),
  }, {
    validators: this.passwordsMatchValidator,
  });

  onSubmit() {
    console.log('提交表单');
  }

  passwordsMatchValidator(group: FormGroup) {
    const password = group.get('password').value;
    const confirmPassword = group.get('confirmPassword').value;

    return password === confirmPassword ? null : { passwordsNotMatch: true };
  }
}

在本文中，我们介绍了如何使用 Angular 进行表单验证以及如何验证空白。我们还介绍了如何自定义验证器，以确保两个输入的密码匹配。希望这篇文章可以帮助你更好地理解 Angular 表单验证机制，和如何验证空白。