title: remove special character with directive not work angular
body: <p>i want transform text in uppercase and remove special character of input text using directive.</p>
  
  <p>the directive is this:</p>
  
  <pre><code>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&lt;string&gt; = new EventEmitter&lt;string&gt;();
  
      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(/[`~!@#$%^&amp;*()_|+\-=?;:'",.&lt;&gt;\{\}\[\]\\\/]/gi, '');
          valueValido = valueValido.toUpperCase();
          this.uppercaseChange.next(valueValido);
          this.cdr.detectChanges();
      console.log(valueValido)
  }
      }
  
  }
  </code></pre>
  
  <p>the input continue show special caracter, but in log i can see the value, and it not have more special caracter.
  i use '' to replace, and not work, but if i use any caracter or space to replace ex: ' ', it work, but i need replace with no value ''. How i can do it?</p>
  
  <p><a href="https://i.stack.imgur.com/PL2Z1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PL2Z1.png" alt="enter image description here"></a></p>
  
  <p>@Edit
  the solution not work, the code:</p>
  
  <pre><code>   &lt;div [ngSwitch]="input.controlType"&gt;
          &lt;div class="ui-g-12" *ngSwitchCase="'textbox'" [class.esconder]="input.hidden"  &gt;
                  &lt;label for="input.key"&gt;{{input.label | doisPontos}}&lt;/label&gt;&lt;br&gt;
        &lt;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 &amp;&amp; form.controls[input.key].invalid "
         [value]="form.controls[input.key].value | removeEspecialCaractere"  &gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>the pipe:</p>
  
  <pre><code>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(/[`~!@#$%^&amp;*()_|+\-=?;:'",.&lt;&gt;\{\}\[\]\\\/]/gi, '').toUpperCase();
          }
      }
  </code></pre>