Angular 2: ngIf inside checkbox directive

Question

I have this checkbox directive in my Angular RC2 app:

export class FormCheckboxDirective {

    @Input() inputId: string;
    @Input() isChecked: string;
    @Input() inputControl: Control;

}

that I am using like this:

<form-checkbox inputId="showcellphone" [inputControl]="accountForm.controls['showcellphone']" isChecked="{{setting.showCellPhone}}">

    <span label>{{ 'showCellphone' | translate:{value: param} }}</span>

    <div error-message>{{ 'cellphoneError' | translate:{value: param} }}</div>

</form-checkbox>

Now, I want to use ngIf inside the directive like this:

<div [ngClass]="{haserror: !input.valid && !input.pristine}">

    <div class="checkbox">

        <label>

            <input *ngIf="isChecked" type="checkbox" [id]="inputId" #input="ngForm" [ngFormControl]="inputControl" value="1"> <ng-content select="[label]"></ng-content>

        </label>

    </div>

    <div class="input-error-feedback" *ngIf="!input.valid && !input.pristine">
        <ng-content select="[error-message]"></ng-content>
    </div>

</div>

But all I get is:

TypeError: Cannot read property 'valid' of undefined

Answer 1

I think by input you meant inputControl

<div [ngClass]="{haserror: !inputControl.valid && !inputControl.pristine}">

    <div class="checkbox">

        <label>

            <input *ngIf="isChecked" type="checkbox" [id]="inputId" #input="ngForm" [ngFormControl]="inputControl" value="1"> <ng-content select="[label]"></ng-content>

        </label>

    </div>

    <div class="input-error-feedback" *ngIf="!inputControl.valid && !inputControl.pristine">
        <ng-content select="[error-message]"></ng-content>
    </div>