Angular 表单 NgModel 指令

Angular 是一个流行的前端框架，它提供了许多高效、强大的组件和指令，其中包括 Angular 表单。

Angular 表单是用于处理用户输入的一组指令和工具。其中，NgModel 是一种指令，用于将控件值和数据模型关联起来。本文将着重介绍 NgModel 指令。

使用 NgModel

使用 NgModel 时，我们需要在控件中添加该指令，并将其绑定到我们的数据模型上。例如，假设我们有一个输入框和一个数据模型：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input [(ngModel)]="name" placeholder="Name">
    <p>Your name is {{name}}</p>
  `,
})
export class AppComponent {
  name = '';
}

在这个例子中，我们使用 [(ngModel)] 双向绑定将输入框的值绑定到组件的 name 变量上。每当输入框的值发生变化时，name 变量的值也会立即更新，并且每次 name 变量的值发生变化时，输入框中显示的值也会被更新。

同时需要注意的是，使用 NgModel 时需要引入 FormsModule 模块：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

自定义 NgModel 指令

有时候，我们需要自定义 NgModel 指令的行为以满足我们的特定需求。这可以通过实现 NgModel 指令的 ControlValueAccessor 接口来实现。

例如，假设我们要添加一个限制输入框中只能输入数字的功能。我们可以创建一个指令，实现 ControlValueAccessor 接口，并通过 NgModel 注册该指令：

import { Directive, HostListener } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Directive({
  selector: '[numbersOnly]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: NumbersOnlyDirective,
      multi: true,
    },
  ],
})
export class NumbersOnlyDirective implements ControlValueAccessor {
  onChange!: (value: any) => void;
  onTouched!: () => void;
  value!: any;

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

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

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

  @HostListener('input', ['$event.target.value'])
  onInputChange(value: any) {
    // 过滤非数字字符
    const newValue = value.replace(/[^0-9]+/g, '');
    // 更新输入框的值和数据模型的值
    this.value = newValue;
    this.onChange(newValue);
  }
}

在这个例子中，我们创建了一个名为 numbersOnly 的指令，将其绑定到输入框上。同时，我们也实现了 ControlValueAccessor 接口，以便可以与 NgModel 一起使用。当输入框的值发生变化时，我们过滤掉输入框中的非数字字符，并将新的值更新到输入框和数据模型中。

总结

Angular 表单 NgModel 指令是 Angular 表单中的一个关键指令，用于将控件值和数据模型关联起来。我们可以通过双向绑定形式或者自定义指令的形式使用它，以满足我们的特定需求。