Wie trigge ich ngModelChange bei benutzerdefinierten Eingaben?

Question

ich eine benutzerdefinierte Eingabekomponente haben, hier ist der Code:

html:

<input class='ctrl__counter-input' maxlength='10' type='text' [value]="counterValue" [ngModel]="counterValue" 
       (ngModelChange)="onKey(input)"> 

Typoskript:

export class BaCounterInput { 


    @Input('minimum') minimum: number; 
     @Input('maximum') maximum: number; 
     @Input('counterValue') counterValue: number; 
     @Output() counterResult = new EventEmitter<number>(); 
    /* rest of component*/ 

onKey(event: any): void { 
     console.log(event); 
     let testNumber = parseInt(event); 

     if (!isNaN(testNumber)) { 
      ((testNumber >= this.minimum) && (testNumber <= this.maximum)) ? this.setCounter(testNumber) : this.counterValue; 
      this.counterResult.emit(this.counterValue); 
     } 
     this.counterResult.emit(this.counterValue); 
    } 
} 

Und das ist, wie ich es in der Host-Komponente nenne:

<label for="sale_year_input">Purchase Price</label> 
      <input-counter id="sale_year_input" 
          [minimum]="1" [maximum]="10" 
          [counterValue]="sale_year" 
          (counterResult)="sale_year" 
          [(ngModel)]="sale_year" 
          (ngModelChange)="calculateOutput()" ngDefaultControl> 

Das Problem ist, dass ich nicht herausfinden kann, wie t o Trigger calculateOut(). Es ist zu beachten, dass sale_year gleichzeitig eine Eingabe und eine Ausgabe ist, und wenn es sich ändert, sollte die Funktion calculateOutput() ausgelöst werden. Irgendwelche Vorschläge werden sehr geschätzt.

Answer 1

ngModelChange sollte $event nehmen, wie es Eingang ist, dann können Sie es entsprechend speichern:

<input class='ctrl__counter-input' maxlength='10' type='text' [value]="counterValue" [ngModel]="counterValue" 
       (ngModelChange)="onKey($event)"> 

...

onKey(newValue): void { 
    this.data = newValue; 
    // .... 
} 

dieses Ereignis auf jedem Tastendruck ausgelöst werden