Question

我在Angular 2中制作了一些掩码指令，其中一个用于邮政编码。它主要起作用，但是当以HTML格式加载数据时，它仅在焦点位于具有该指令的输入时起作用。我曾尝试在主持人中放置各种活动，但都没有奏效。我尝试使用更改，输入，但都没有用。

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);       
  }
}

Answer 1

如果在指令中提供NgModel，则会获取一个新实例而不是现有实例。

此行需要删除：

providers: [NgModel],

Input mask fields in Angular2 forms显示了一个完整的示例。

Angular 2中的Mask指令不在加载视图上工作

1 个答案: