Angular 2 日期选择器禁用

Question

我写了一个angular代码，这里基于select标签是或否。我需要更改具有日期选择器的文本框以启用禁用。但是它不起作用。

这是我的代码..,

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label>Signed AOB</label>
            <select name="signed" class="form-control required" [(ngModel)]="signed" (change)="checkSigned(signed)">
                <option value="N">No</option>
                <option value="Y">Yes</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Date</label>
            <input type="text" name="Date" class="form-control" [(ngModel)]="Date" placeholder="MM-DD-YYYY" datepicker disabled="isEnabled">
        </div>
    </div>
</div>

和相应的组件..,

import { Component, Input, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'tab',
  templateUrl: './app/components/tab/tab.component.html'
})

export class TabComponent implements OnInit{

    constructor(){}

    @Input() tab: Object;    

    checkSigned(value){
        if(value === 'Y'){
            this.isEnabled=true;
        }else{
            this.isEnabled=false;
        }
    }

    ngOnInit(){

    }

}

日期选择器指令..,

import { Directive, ElementRef, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

declare var $: any;

export const CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DatePicker),
    multi: true
};

@Directive({
    selector: '[datepicker]',
    host: { '(blur)': 'onTouched($event)' },
    providers: [CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR]
})
export class DatePicker implements ControlValueAccessor {
    private innerValue: string;

    @Input('changeMonth') changeMonth: boolean = true;
    @Input('changeYear') changeYear: boolean = true;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        $(this.el.nativeElement).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm-dd-yy'
        }).on('change', (e: any) => {
            this.onChange(e.target.value);
        });
    }


    public onChange: any = (_:any) => {  }
    public onTouched: any = () => {  }

    get value(): any {
        return this.innerValue;
    };

    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChange(v);
        }
    }


    writeValue(val: string): void {
        this.innerValue = val;
        $(this.el.nativeElement).datepicker("setDate", this.innerValue);
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
}

Answer 1

这是因为您 ngModel 只有在您的更改功能被触发后才会更新。所以请您更改 checkSigned() 函数如下

<select name="signed" class="form-control required" [(ngModel)]="signed" (change)="checkSigned($event.target.value)">
    <option value="N">No</option>
    <option value="Y">Yes</option>
</select>

Answer 2

我通过在指令中添加这个解决了 prb，

setDisabledState(isDisabled: boolean): void {
        this.renderer.setElementProperty(this.el.nativeElement, 'disabled', isDisabled);
    }

感谢大家的帮助:-)

Angular 2 日期选择器禁用

Angular 2 datapicker Disabled

datepicker

angular2-forms