Question

我想创建一个指令可以在表单控件无效时更改主机元素，如下面的代码示例所示：

<div [appFormControlValidate]="email"> <!-- email is the form control I want to inject -->
  <input type="email" formControlName="email" />
</div>


@Directive({
  selector: '[appFormControlValidate]'
})
export class FormControlValidateDirective {
  @Input('appFormControlValidate') formControl: FormControl;

  constructor(private el: ElementRef) {
    console.log(this.formControl); // <-- give me undefine
  }

}

感谢。

Answer 1

可以在@Input生命周期访问具有OnInit装饰器的属性，而不是构造函数。初始化@Input的属性时，将调用OnChanges事件。此时，属性具有传递的值，并且在此事件OnInit被调用一次之后。因此，OnInit已经收到了传递的值。

@Directive({
  selector: '[appFormControlValidate]'
})
export class FormControlValidateDirective {
  @Input('appFormControlValidate') formControl: FormControl;

  constructor(private el: ElementRef) {

  }

  ngOnInit() {
     console.log(this.formControl);
  }

}

将formcontrol注入自定义指令

1 个答案: