Angular框架中在表单中通过指令格式化处理文本数据内容

举例一个应用场景：输入框录入的内容字字符转为大写

• 创建一个表单：

<form [formGroup]="form">
  <nz-form-item>
    <nz-form-control nzErrorTip="请输入用户名!">
      <nz-input-group nzPrefixIcon="user">
        <input formControlName="userName" appToUpperCase nz-input placeholder="请输入用户名" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
</form>

• 表单的类组件：
  在这里定义表单的相关数据

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
  public form: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.form = this._fb.group({
      userName: [null]
    });
  }

  ngOnInit(): void {

  }


  submitForm() {}

}

接着创建一个共享的shared文件夹，里面再定义一个directives文件夹，这里面放一些共享的指令。

shared模块文件.png

我们在去shared.module.ts里面导出一下指令：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToUpperCaseDirective } from './directives/to-upper-case.directive';

const ENUM_DIRECTIVES = [
  ToUpperCaseDirective
]

@NgModule({
  declarations: [
    ...ENUM_DIRECTIVES
  ],
  imports: [
    CommonModule
  ],
  exports:[
    CommonModule,
    ...ENUM_DIRECTIVES
  ]
})
export class SharedModule { }

这里面的@HostListener('keyup')监听了这个元素的keyup事件，当我们按下键盘时，我们使用ElementRef去获取这个输入框元素的value值，然后使用toUpperCase()将字符转为大写即可。

在shared.module.ts中导出指令后，我们在去表单组件的模块里面去导入CommonModule:

home模块文件.png

import { NgModule } from '@angular/core';
..........
import { SharedModule } from '../../../shared/shared.module';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [SharedModule,FormsModule,ReactiveFormsModule,CommonModule],
  declarations: [HomeComponent, FormComponent],
  exports: [HomeComponent]
})
export class HomeModule { }

• 输入框中使用管道符：

<input formControlName="userName" appToUpperCase nz-input placeholder="请输入用户名" />