角2 |使用大写指令后返回null值

Question

为什么在使用指令时它会返回null值？我在这里使用formController。

请参阅以下代码示例。

directives.ts

import { Directive, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';

@Directive({
    selector: '[uppercase]'
})    
export class UppercaseDirective{
    @Output() ngModelChange = new EventEmitter<any>();
    value: any;

    constructor(
        private el: ElementRef
    ){}

    @HostListener('input', ['$event']) onInputChange($event) {
        this.value = $event.target.value.toUpperCase();
        this.ngModelChange.emit(this.value);
    }
}

component.html

<div class="col-lg-4">
      <small [ngClass]="{'prompterror': storageForm.controls.id.valid || storageForm.controls.id.pristine}">
     *required
      </small>
    <div class="input-group">
      <input type="text" class="form-control input-field" placeholder="Storage ID" [(ngModel)]="storageForm.value.id" formControlName="id" required uppercase>
      <span class="input-group-btn" (click)="showModal()">
        <i class="btn glyphicon glyphicon-search"></i>
      </span>
    </div>
  </div>