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

Incase, если вы хотите сделать это с простой функцией привязки

Код :

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.

Answer 2

Вы можете создать 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();
}