javascript - 删除带有指令的特殊字符， Angular 不起作用

Question

我想将文本转换为大写并使用指令删除输入文本的特殊字符。

指令是这样的:

import { Directive, EventEmitter, Output, Input, OnInit, ChangeDetectorRef } from '@angular/core';

@Directive({
    selector: '[uppercase]',
    host: {
        '[value]': 'uppercase',
        '(input)': 'format($event.target.value)'
    }
})

export class UppercaseDirective implements OnInit {

    @Input() uppercase: string;
    @Output() uppercaseChange: EventEmitter<string> = new EventEmitter<string>();

    constructor(private cdr: ChangeDetectorRef) {
    }

    ngOnInit() {
        this.uppercase = this.uppercase || '';
        this.format(this.uppercase);
    }

      format(value) {
    let regNumber = /^\d+$/;
    if (!value || regNumber.test(value)) return
    let valueValido = value.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
        valueValido = valueValido.toUpperCase();
        this.uppercaseChange.next(valueValido);
        this.cdr.detectChanges();
    console.log(valueValido)
}
    }

}

输入继续显示特殊字符，但在日志中我可以看到该值，并且它没有更多特殊字符。我使用 '' 来替换，但不起作用，但是如果我使用任何字符或空格来替换 ex: ' '，它可以工作，但我需要替换为无值 ''。我该怎么做？

@编辑解决方案不起作用，代码:

   <div [ngSwitch]="input.controlType">
        <div class="ui-g-12" *ngSwitchCase="'textbox'" [class.esconder]="input.hidden"  >
                <label for="input.key">{{input.label | doisPontos}}</label><br>
      <input [formControlName]="input.key" [id]="input.key" [type]="input.type" [ngStyle]="{'width':input.width}"
       pInputText [(uppercase)]="form.controls[input.key].value" [class.ui-state-error]="form.controls[input.key].touched && form.controls[input.key].invalid "
       [value]="form.controls[input.key].value | removeEspecialCaractere"  >
          </div>

管道:

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

    @Pipe({
      name: 'removeEspecialCaractere'
    })
    export class removeEspecialCaracterePipe implements PipeTransform {  
        transform(value: any, args?: any): any {
          return value === undefined ? '' : value.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').toUpperCase();
        }
    }

Answer 1

对于文本转换，请使用管道。将管道变换放在要删除特殊字符的位置

html

 {{ p | transform}}

transform.pipe.ts

 transform(value: any, args?: any): any {
    return value === undefined ? '' : value.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').toUpperCase();
  }

示例:https://stackblitz.com/edit/angular-wp12pu