如何在数据值上使用指令？

Question

如何对数据值使用指令？

<div class="col-12 data" appPhoneNumber>
    {{data.phoneNumber}}
</div>

appPhoneNumber 是我的指令，data.phoneNumber 是我要使用它的值。我以这种方式尝试过，但出现错误：

Error: StaticInjectorError(AppModule)[PhoneNumberDirective -> NgControl]: StaticInjectorError(Platform: core)[PhoneNumberDirective -> NgControl]: NullInjectorError: No provider for NgControl!

我有点不知所措，我对指令没有太多经验

编辑以包含指令代码：

@Directive({
  selector: '[appPhoneNumber]'
})
export class PhoneNumberDirective {

  constructor(public ngControl: NgControl) { }
  @Input('appPhoneNumber') appPhoneNumber;

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

  onInputChange(event){
    let newVal = event.replace(/\D/g, '');
    if(newVal.length === 0){
      newVal = '';
    } else if(newVal.length<=3){
      newVal = newVal;
    } else if(newVal.length<=6){
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '.');
    } else if(newVal.length<=10){
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '..');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '..');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

Answer 1

您不能在没有 angular 输入的情况下使用注入了 ngControl 的输入控件，这就是您收到无提供程序错误的原因。对于简单的显示值，您需要一个管道。首先将你的转换函数提取到可重用的东西中：

function formatPhoneNumber(val) {
    let newVal = val.replace(/\D/g, '');
    if(newVal.length === 0){
      newVal = '';
    } else if(newVal.length<=3){
      newVal = newVal;
    } else if(newVal.length<=6){
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '.');
    } else if(newVal.length<=10){
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '..');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '..');
    }
    return newVal;
}

并将其用于您的指令，然后编写一个也使用它的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'phone'})
export class PhonePipe implements PipeTransform {
  transform(value: string): string {
    return formatPhoneNumber(value);
  }
}

正常声明/导入它然后像这样使用它：

<div class="col-12 data">
    {{data.phoneNumber | phone}}
</div>

如何在数据值上使用指令？

How to use directive on data value?

angular-directive

angular