指令现在导致 "Can't bind to 'blur' since it isn't a known property of 'input'."

Question

在我们的 angular 4.3.2 项目中，我们有一个指令 .trim() 各种类型的输入。完整：

import { Directive, ElementRef, forwardRef, HostBinding, Renderer2 } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

const TRIM_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TrimDirective),
  multi: true
};

@Directive({
  selector: 'input[type=text]:not(#autocomplete-keyboard-access):not([disabled]):not(.dropdown-box), input[type=email]',
  providers: [TRIM_VALUE_ACCESSOR]
})

export class TrimDirective implements ControlValueAccessor {
  onChange = (_: any) => {};
  onTouched = () => {};

  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  @HostBinding('blur')
  blur() {
    this.onTouched();
  }

  @HostBinding('change')
  trim(value: any): void {
    if (value) {
      value = value.toString().trim();
    }

    this.writeValue(value);
    this.onChange(value);
  }

  registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }

  registerOnTouched(fn: () => any): void { this.onTouched = fn; }

  writeValue(value: any): void {
    if (typeof value !== 'undefined') {
      this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    }
  }
}

导入相关@NgModule。同样，FormsModule 存在于 NgModule.imports[].

在模板中，我现在在模板编译时出现以下错误（无论是在浏览器中还是在 AoT 中）：

Can't bind to 'blur' since it isn't a known property of 'input'.

只要指令适用，就会抛出错误。

有问题的模板（可追溯到 beta-6 天，此后一直未重构）：

<input #userEmail
       name="email"
       type="email"
       class="modal-fixed-width-input" maxLength="128"
       required
       placeholder="email@domain.com"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       [ngClass]="{'bg-yellow red' : !emailFocus && emailErrorMessage}"
       [(ngModel)]="userMail"
       (ngModelChange)="fieldsChange=true"
       ngControl="email"
       #email="ngModel"
       (focus)="emailFocus=true"
       (blur)="emailFocus=false; userEmail.value = userEmail.value.trim(); emailErrorMessage = isEntryValid(userEmail.value, 'Email');">

在转换到 Angular CLI 之前，该指令有效。由于 FormsModule 已正确导入（这通常是对此错误的解释），我无法解释为什么该指令的事件侦听器绑定会导致此编译错误。

Answer 1

input 元素上没有 blur 和 change 属性。

我猜你正在寻找 @HostListener

@HostListener('blur')
....
@HostListener('change')

@HostListener 装饰器可让您订阅宿主元素的事件，同时

@HostBinding 将属性绑定到宿主元素

指令现在导致 "Can't bind to 'blur' since it isn't a known property of 'input'."

Directive now causes "Can't bind to 'blur' since it isn't a known property of 'input'."

angular-template

angular-directive

angular