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：无法读取未定义
的属性'valid'

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里面的checkbox指令

1 个答案: