Угловые 2: ngIf внутри Флажок директива

Question

У меня есть этот флажок директива в моем угловом приложении RC2:

export class FormCheckboxDirective { 

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

} 

, что я использую как это:

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

Теперь я хочу использовать ngIf внутри директива, как это:

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

Но все это я получаю:

TypeError: Cannot read property 'valid' of undefined

Answer 1

Думаю, вы имели в виду inputinputControl

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