ngModel setting value after directive

ng-model not working
can t bind to 'ngmodel' since it isn t a known property of 'input
how to set ng-model value in javascript
how to set value in ng-model in angularjs
ngmodeloptions angular 7

I have the following problem:

I have an phone number input field like this:

I want to mask the text like 55-5555-5555 so I have created a directive:

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

  selector: '[appPhoneNumber]'
export class PhoneNumberDirective {

 constructor(public ngControl: NgControl) { }

  ngOnInit() {


  windowReady(value) {
    this.onInputChange(value, false);

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(, true);

  onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 2) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})/, '$1-$2');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '$1-$2-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '$1-$2-$3');
    console.log("New value is: " + newVal);

And here is the input field:

<mat-form-field style="width: 75%;">
  <input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">

As you can see, the input has an ngModel for getting and setting the value, the problem I am facing right now is when the input first appear and the ngModel has a value, the field displays the text like:


Instead of:


My theory right now is that the directive is setting the value:


Before the input itself:

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">

So when the input set the value, it takes the value without the mask and overrides the text set by the directive.

Does anyone know how to call the directive after the ngModel or something that help me?

I believe you want a pipe, not a directive. If you take a look at this post it talks about how to use a pipe with an ngModel Using Pipes within ngModel on INPUT Elements in Angular

Angular Directive Tutorial With Example | Custom Directives, The ngModel directive binds an input , select , textarea (or custom form control) to a property on Setting related css classes on the element ( ng-valid , ng-invalid , ng-dirty , ng-pristine By default, ngModel watches the model by reference, not value. The following CSS classes are added and removed on the associated  I'm trying to get the value from ngModel from my input through a directive, but I can't get the value. Here is my code: angular .module('myapp') .directive('infoVal', myVal); function my

ng-mask might be what you are looking for.

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono" mask='55-5555-5555'>

Here is the link for further information ng-mask

NgModel, All ngModel directives will use the options of their nearest ngModelOptions ancestor. the input element will have the following settings { allowInvalid: Notice that the debounce setting was not inherited and used the default value instead. The FormControl instance tracks the value, user interaction, and validation status of the control and keeps the view synced with the model. If used within a parent form, the directive also registers itself with the form as a child control. This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it.

The issue is not with [(ngModel)] or Input control. The actual cause of this issue is matInput directive. Just remove matInput and check.

FormControlName, Tracks the configuration options for this ngModel instance. name: An updateOn​: Defines the event upon which the form control value and validity update. Defaults to The top-level directive for this control if present, otherwise null. validator:  Access ngModel value in directive Angular built-in directives are useful and sufficient for most of basic use. However, to leverage the power provided by the framework, writing custom directive is inevitable.

updateOn: Sets the default updateOn value for all child NgModels below it unless Because this directive always lives at the top level of a form, it is always an The following example shows you how to change the "updateOn" option from its  You can specify an ngModelOptions directive on any element. All ngModel directives will use the options of their nearest ngModelOptions ancestor. The ngModelOptions settings are found by evaluating the value of the attribute directive as an AngularJS expression. This expression should evaluate to an object, whose properties contain the settings.

is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form. The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. ngModel is responsible for: Binding the view into the model, which other directives such as input, textarea or select require.

with [] syntax, changing the value of the domain model in the component class sets the value in the view. The two-way data the recommended way to set the value in the template-driven forms. The following code uses the [(ngModel)]="contact.firstname" to bind the firstname HTML element to the contact. firstname field in the component class.