Directive input property 'undefined' when explicitly set in template

I am trying to write some form logic inside of a directive that is attached to each of the form controls in my form:

<div class="card md-card__signupCard">
  <form [formGroup]="form" (submit)="onSubmit()">
    <div class="form-group">
      <label>Username</label>
      <input
        [formControlName]="'username'"
        class="form-control"
        placeholder="3+ characters"
        type="text"
        validate [payload]="'someRandomValue'"
      />
    </div> ... etc

I have a HostListener inside of my custom validate directive which listens to all 'blur' events:

@Directive({
  selector: '[validate]'
})
export class ValidateDirective {
  @Input() payload;
  @HostListener('blur')
  eventListener() {
    console.log(this.payload);
  }
  constructor(private el: ElementRef) {}
}

For some reason when I try to console.log the payload value it is 'undefined' on the first blur, however, prints the value on all subsequent blur events. Why is this happening?