Angular 学习笔记83：在表单中通过指令将输入框中输入的文本数据大写

有时候要求用户输入的字符自动转化为大写字符。

在表单中通过指令将输入框中输入的文本数据大写

模版文件

<form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label nzSpan="4">转换大写</nz-form-label>
    <nz-form-control nzSpan="7">
      <input nz-input formControlName="name" placeholder="请输入字符">
    </nz-form-control>
  </nz-form-item>
</form>

类文件

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

@Component({
  selector: 'app-to-upper-com',
  templateUrl: './to-upper-com.component.html',
  styleUrls: ['./to-upper-com.component.less']
})
export class ToUpperComComponent implements OnInit {
  public validateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validateForm = this.fb.group({
      name: [null]
    });
  }

  ngOnInit() {
  }

}

• 创建一个指令

ng g d toUpperCase

• 编辑指令

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appToUpperCase]'
})
export class ToUpperCaseDirective {

  constructor(private el: ElementRef) {
  }

  @HostListener('keyup')
  onKeyup() {
    this.handleUpperCase();
  }

  handleUpperCase() {
    this.el.nativeElement.value = String(this.el.nativeElement.value).toUpperCase();
  }

}

这里 @HostListener('keyup')监听了当前元素的keyup事件。

• 在使用此指令的模块中引入

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PagesRoutingModule } from './pages-routing.module';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// ...
import { ToUpperComComponent } from './to-upper-com/to-upper-com.component';
import { ToUpperCaseDirective } from '../public/directive/to-upper-case.directive';

@NgModule({
  declarations: [
    //...
    ToUpperComComponent,
    ToUpperCaseDirective,
  ],
  imports: [
    CommonModule,
    NgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    PagesRoutingModule,
    ComponentsModule,
  ]
})
export class PagesModule {
}

• 使用指令

修改组件的模版文件

<form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label nzSpan="4">转换大写</nz-form-label>
    <nz-form-control nzSpan="7">
      <input nz-input appToUpperCase formControlName="name" placeholder="请输入字符">
    </nz-form-control>
  </nz-form-item>
</form>

运行结果