Angular 中使用 form 表单进行数据绑定的小技巧-JavaScript中文网-JavaScript教程资源分享门户

Angular 是目前前端开发中最流行的框架之一，它提供了大量的支持来让我们更加容易地构建 Web 应用程序。在 Angular 中，表单是创建交互式用户体验的一个重要部分，而表单绑定是一种方便并且强大的方式来收集、验证和提交用户输入的数据。在本文中，我们将会介绍 Angular 中使用 form 表单进行数据绑定的小技巧，帮助你更好地构建表单并更有效地收集和处理用户输入的数据。

Form 表单介绍

在 Angular 中，表单通常由一组表单控件和一个 form 元素组成。表单控件包括 input、textarea、select 等元素，form 元素则用于包装这些控件并提供验证和提交功能。你可以在组件中使用 Angular 的 FormBuilder 类来创建表单，并使用指令来与表单控件进行绑定。

下面是一个简单的登录表单示例，其中包含了两个输入控件（用户名和密码），一个提交按钮，以及一个名称为 loginForm 的表单组件：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
  }

  onSubmit() {
    // 处理表单提交逻辑
  }
}

使用 Form 表单进行数据绑定的小技巧

绑定 form 表单数据到模型数据

在 Angular 中，你可以使用 ngModel 指令将表单控件绑定到模型数据，实现双向数据绑定。例如，将一个 input 元素绑定到模型数据 username：

<label for="username">用户名：</label>
<input type="text" name="username" [(ngModel)]="model.username">

其中，model 是一个组件中的变量，用于存储表单数据。在上述示例中，我们可以通过访问组件的 model.username 成员来获取或设置 input 元素的值。

表单验证

表单验证是表单中重要的一个环节。Angular 提供了大量内置的验证器，如 required、minLength、maxLength、email、pattern 等，这些验证器可以轻松地与模型中的属性绑定在一起，形成一个验证器函数。在模板中，你可以使用 Angular 的指令来渲染出相应的错误消息，以提醒用户输入合法性。

在现实中，一个表单控件往往具有复杂的验证逻辑，Angular 的内置验证器并不能满足需求。在这种情况下，我们可以编写自定义验证器，以实现更加复杂的表单验证逻辑。

自定义表单控件

当 Angular 内置的表单控件无法满足需求时，我们可以编写自己的表单控件。在 Angular 中，你可以通过实现 ControlValueAccessor 接口来创建自定义表单控件，并使用 ngModel 指令将其绑定到模型数据。自定义表单控件可以包含任意 HTML 元素，并提供自定义的行为、样式和验证逻辑，从而满足各种定制的需求。

示例代码

下面是一个包含表单绑定、自定义验证器和自定义表单控件的完整示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

// 自定义密码强度验证器
function passwordStrengthValidator(control: FormControl) {
  const value = control.value;
  if (!value) {
    return null;
  }
  const hasNumber = /\d/.test(value);
  const hasCapital = /[A-Z]/.test(value);
  const hasLowercase = /[a-z]/.test(value);
  const passwordValid = hasNumber && hasCapital && hasLowercase;
  return passwordValid ? null : { passwordStrength: true };
}

// 自定义密码框组件
@Component({
  selector: 'app-password-input',
  template: `
    <div class="form-group">
      <label for="{{ name }}">密码：</label>
      <input type="password" [id]="name" [name]="name" [(ngModel)]="value" [ngClass]="{ 'is-invalid': isInvalid() }">
      <div class="invalid-feedback" *ngIf="isInvalid()">
        密码必须包含数字、大写字母和小写字母。
      </div>
    </div>
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: PasswordInputComponent,
    multi: true,
  }],
})
export class PasswordInputComponent implements ControlValueAccessor {
  name = '';
  value = '';
  onChange: (value: any) => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value;
    if (this.onChange) {
      this.onChange(this.value);
    }
  }

  registerOnChange(fn: (value: any) => void) {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void) {
    this.onTouched = fn;
  }

  isInvalid() {
    return !passwordStrengthValidator(new FormControl(this.value));
  }
}

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" name="username" [(ngModel)]="model.username" [ngClass]="{ 'is-invalid': form.get('username').invalid && form.get('username').touched }" required>
        <div class="invalid-feedback" *ngIf="form.get('username').invalid && form.get('username').touched">
          用户名不能为空。
        </div>
      </div>
      <app-password-input [formControl]="form.get('password')"></app-password-input>
      <button type="submit" [disabled]="form.invalid">登录</button>
    </form>
  `,
})
export class LoginComponent {
  model = {
    username: '',
    password: '',
  };
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', [Validators.required, passwordStrengthValidator]],
    });
  }

  onSubmit() {
    // 处理表单提交逻辑
  }
}

总结

本文介绍了 Angular 中使用 form 表单进行数据绑定的小技巧，包括表单数据绑定、表单验证和自定义表单控件等。表单是 Web 应用程序中重要的一个组成部分，灵活地掌握 Angular 中表单的使用和技巧，可以帮助你更好地构建出高质量的用户交互体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651d58f695b1f8cacd4e88cd