Angular 2: ngIf inside checkbox 指令

Question

我的 Angular 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

我认为 input 你的意思是 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>

Angular 2: ngIf inside checkbox 指令

Angular 2: ngIf inside checkbox directive

angular-directive

angular