将formcontrol注入到自定义指令中

Question

I want to create a directive can change a host element when a form control invalid as code sample below:

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

}

Thanks.

Answer 1

Properties with @Input decorator will be accessible at the OnInit lifecycle, not in the constructor . When the property with @Input is initialized, the OnChanges event is called. At this time the property has the passed value and after this event OnInit is called once. So already at OnInit you will receive the passed value.

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

  constructor(private el: ElementRef) {

  }

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

}