Angular 6限制某些字母表

Question

我有以下输入字段。我试图只允许用户从A-F输入字母。如果用户试图输入该范围之外的字母表，则应该即时修剪字母表，即没有按钮来验证其是否有效输入。输入字段还允许数字和特殊字符。

<mat-form-field>
  <input matInput (keyup)="MACAddressInput()" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">
  <mat-error *ngFor="let error of errors_by_field['mac_address']">{{error.message}}</mat-error>
</mat-form-field>

  MACAddressInput() {
    if (this.model.mac_address) {
      const inputColon = this.model.mac_address.replace(new RegExp(':', 'g'), '').trim();
      const MAC_blocks = inputColon.match(/.{1,2}/g);
      let formatedMac = MAC_blocks.shift();
      for (const block of MAC_blocks) {
       formatedMac = formatedMac + ':' + block;
      }
      this.model.mac_address = formatedMac.toUpperCase();
    }
  }

我尝试使用html模式，但它允许用户输入任何内容

Answer 1

你可以创建一个custom pipe来做到这一点。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myCustomPipe'
  })
  export class MyCustomPipe implements PipeTransform {
    transform(input: string): string {
        let newString = "";
      for(let i=0; i<= input.length; i++){
        var char = input.charAt(i);
        if(char.charCodeAt(0) >= 65 && char.charCodeAt(0) <=70){
            newString += char;
        }
      }

      return newString;
    }
  }

然后将其添加到您的模块中

 declarations: [
    ...
    MyCustomPipe,
    ...
]

以这种方式将其调用到您的.html组件中

{{ myText | myCustomPipe }}

我做了一个测试，用myText = "ABCG";我的管道将文本修剪为ABC。

在你的功能中做出神奇的事：

if (this.model.mac_address) {
    let newString = "";
    for(let i=0; i<= this.model.mac_address.length; i++){
        var char = this.model.mac_address.charAt(i);
        if(char.charCodeAt(0) >= 65 && char.charCodeAt(0) <=70){
            newString += char;
        }
    }
    this.model.mac_address = newString.toUpperCase();
}

Answer 2

如果你想用简单的绑定功能来做这件事

码：

MACAddressInput(e) {
   let code = e.key.charCodeAt(0);
   if ((code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {}
   else {
     e.preventDefault();
     return;
   }
}

HTML：

<input matInput (keydown)="MACAddressInput($event)" placeholder="MAC address" name="mac_address" required [(ngModel)]="model.mac_address" (blur)="validate()">

注意：确保使用(keydown)事件。此代码将允许A-Z和a-z。