CODEWITHSUNDEEP
javascripthtmlangular
Edmar Munhoz
Edmar Munhoz

Reputation: 221

Directive in on load informations

I am using Angular2 and I created a directive to put masks on inputs, as follows:

import {Directive, Attribute} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Directive({
    selector: '[real]',
    host: {
        '(blur)': 'onInputChange()'        
    }
})

export class RealDirective {
    modelValue: string;
    viewValue: string;

constructor(public model: NgModel) {
}

onInputChange() {
    this.modelValue = this.model.value.replace(/[^0-9\,]/g,'');
    this.viewValue = RealDirective.format(this.modelValue);
    this.model.viewToModelUpdate(this.modelValue);
    this.model.valueAccessor.writeValue(this.viewValue)
}

static format(valor) {

    if (valor == "") {
        valor = "0";
    }

    var valorFloat: number = parseFloat(valor.replace(",", "."));
    var valorString: string = valorFloat.toFixed(2).toString().replace(".", ",");

    var valorSemCasasDecimais = valorString.substring(0, valorString.length - 3);
    var valorArray: string[] = valorSemCasasDecimais.split("");

    var casa: number = 0;

    var valorStringComPontosInvertida: string = "";

    for (var i = valorArray.length - 1; i > -1; i--) {
        valorStringComPontosInvertida = valorStringComPontosInvertida + valorArray[i];
        casa = casa + 1;
        if (casa == 3 && i > 0) {
            valorStringComPontosInvertida = valorStringComPontosInvertida + ".";
            casa = 0;
        }
    }

    var valorStringComPontosInvertidaArray: string[] = valorStringComPontosInvertida.split("");
    var valorStringComPontosCorreta: string = "";

    for (var i = valorStringComPontosInvertidaArray.length - 1; i > -1; i--) {
        valorStringComPontosCorreta = valorStringComPontosCorreta + valorStringComPontosInvertidaArray[i];
    }

    var valorStringPronta: string = valorStringComPontosCorreta + valorString.substring(valorString.length - 3, valorString.length);

    return valorStringPronta;
}
}

It runs the blur event. But I would like that execute on loading the information on the form for each input, does anyone have any idea how to do this?

Upvotes: 0

Views: 37

Answers (1)

Michael Desigaud
Michael Desigaud

Reputation: 2135

You can use the ngOnInit method to wait for the directive to be loaded. https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

For example:

@Directive({
    selector: '[real]',
    host: {
        '(blur)': 'onInputChange()'        
    }
})

export class RealDirective {
    modelValue: string;
    viewValue: string;

   constructor(public model: NgModel) {
   }
   ngOnInit():void {
     console.log(this.model);
   }
}

if this.model is null you may consider using ngOnChanges instead of ngOnInit to check when the value is changing.

Also can you post how the directive is called in your code

Upvotes: 1

Related Questions