2016-05-30 1 views
0

Я сделал несколько директив маски в Angular 2, один из них предназначен для почтового индекса. В основном он работает, но при загрузке данных в HTML он работает только тогда, когда фокус находится на входе, имеющем директиву. Я пробовал помещать различные события в хост, но никто не работал. Я пытался использовать изменения, ввод, но никто не работал.Маска директива в Angular 2 не работает на вид нагрузки

HTML:

вход имеет директиву (директива название: Cep)

<div class="col-sm-4"> 
     <div class="form-group fg-line"> 
      <label for="cep">CEP</label> 
      <input type="text" class="form-control input-sm" id="cep" placeholder="CEP" required [(ngModel)]="empresa.Cep" borda-animada 
       cep maxlength="9" ngControl="cep" #cep="ngForm"> 
     </div> 
    </div> 

Директива:

import {Directive} from '@angular/core'; 
import {NgModel} from '@angular/common'; 
import {Mascaras} from '../core/mascaras' 

@Directive({ 
    selector: '[ngModel][cep]', 
    providers: [NgModel], 
    host: { 
     '(blur)': 'onInputChange($event)', 
     '(input)': 'onInputChange($event)' 
    } 
}) 
export class CepDirective { 
    modelValue: string; 
    viewValue: string; 

constructor(public model: NgModel) {} 

onInputChange(event) { 
    console.log('teste ngmodelchange'); 

    //event é o evento html que é disparado no evento blur 
    //por isso precisa pegar o target.value. 
    var newValue = Mascaras.cep(event.target.value); 
    this.model.valueAccessor.writeValue(newValue);  
    } 
} 
+0

Я предполагаю, что использование пользовательского «ControlValueAccessor» будет правильным подходом. –

+0

У вас есть пример? –

+0

Здесь есть много ответов на похожие вопросы, в основном из Тьерри. Просто выполните поиск '[angular2] ControlValueAccessor' –

ответ

0

Если вы предоставляете NgModel в директиве, он получает новую инстанцию nce, а не существующий.

Эта линия должна быть удалена:

providers: [NgModel], 

Input mask fields in Angular2 forms показывает полный пример.

Смежные вопросы