代码之家 › 专栏 › 技术社区 › anon

角度6限制某些字母

angular-material typescript angular

anon · 技术社区 · 6 年前

我有以下输入字段。我尝试只允许用户从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模式,但它允许用户输入任何内容

2 回复 | 直到 6 年前

Jacopo Sciampi 6 年前

您可以创建 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();
}

Shreenil Patel 6 年前

如果你想用简单的绑定函数

代码 :

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

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

注意 :确保使用 (keydown)