以Angular2形式输入掩码字段 [英] Input mask fields in Angular2 forms

问题描述

是否可以在Angular 2中使用模型驱动的表单，并找到允许屏蔽输入字段的指令，例如电话号码输入
[phone]

解决方案

Plunker> = RC.5 原始

>

一种方法是使用一个指令来注入 NgControl 并操纵值

（有关详情，请参阅内嵌评论） $ b

  @Directive（{
 selector：'[ngModel] [phone]'，
 host：{$ b $'（ngModelChange）'：'onInputChange（$ event）'，
 '（keydown.backspace）'：'onInputChange（$ event.target.value，true）'
} 
}）
导出类PhoneMask {
构造函数（public model：NgControl ）{} 
 
 onInputChange（event，backspace）{
 // remov e所有掩码字符（只保留数字）
 var newVal = event.replace（/ \D / g，''）; 
 //特殊处理退格空间否则
 //删除非数字字符不被识别
 //这是一个有待改进的空间，例如，如果您在
 / /字符串中间
 if（backspace）{
 newVal = newVal.substring（0，newVal.length  -  1）; 
} 
 
 //不显示空值大括号
 if（newVal.length == 0）{
 newVal =''; 
} 
 //不在末尾显示空组的大括号
 else if（newVal.length< = 3）{
 newVal = newVal.replace（/ ^ （\d {0,3}）/，'（$ 1）'）; 
} else if（newVal.length< = 6）{
 newVal = newVal.replace（/ ^（\d {0,3}）（\d {0,3}）/ ，'（$ 1）（$ 2）'）; 
} else {
 newVal = newVal.replace（/ ^（\d {0,3}）（\d {0,3}）（。*）/，'（$ 1）（ $ 2） -  $ 3' ）; 
} 
 //设置新值
 this.model.valueAccessor.writeValue（newVal）; 
 
 
 code $ 
 
 
 
  @Component（{
 selector：'my-app'，
 providers：[]，
 template：`
 lt lt ;形成[ngFormModel] = 形式 > 
将输入类型= 文本 电话[（ngModel）] = 数据 ngControl = 电话 > 
将/形式> 
`，
指令：[PhoneMask] 
}）
导出类应用程序{
构造函数（fb：FormBuilder）{
 this.form = fb.group （{
 phone：[''] 
}）
} 
} 
  
 的 Plunker示例< = RC.5   
 
Is it possible to have model driven form in Angular 2 and find directive that would allow to mask input field like phone number entry
[phone] ?
解决方案
Plunker >= RC.5

original

One way you could do it is using a directive that injects NgControl and manipulates the value

(for details see inline comments)
@Directive({
  selector: '[ngModel][phone]',
  host: {
    '(ngModelChange)': 'onInputChange($event)',
    '(keydown.backspace)': 'onInputChange($event.target.value, true)'
  }
})
export class PhoneMask {
  constructor(public model: NgControl) {}

  onInputChange(event, backspace) {
    // remove all mask characters (keep only numeric)
    var newVal = event.replace(/\D/g, '');
    // special handling of backspace necessary otherwise
    // deleting of non-numeric characters is not recognized
    // this laves room for improvement for example if you delete in the 
    // middle of the string
    if (backspace) {
      newVal = newVal.substring(0, newVal.length - 1);
    } 

    // don't show braces for empty value
    if (newVal.length == 0) {
      newVal = '';
    } 
    // don't show braces for empty groups at the end
    else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '($1)');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) ($2)');
    } else {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, '($1) ($2)-$3');
    }
    // set the new value
    this.model.valueAccessor.writeValue(newVal);       
  }
}




@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <form [ngFormModel]="form">
    <input type="text" phone [(ngModel)]="data" ngControl="phone"> 
  </form>
  `,
  directives: [PhoneMask]
})
export class App {
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      phone: ['']
    })
  }
}
Plunker example <= RC.5

                        
这篇关于以Angular2形式输入掩码字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！