在 Angular 中添加指令后禁用 属性 不工作,如果不存在指令则工作
Disabled property not working after adding directive in Angular, working if no directive is present
我有一个输入字段在添加指令后没有被禁用。如果删除该指令,它就可以正常工作。
<div class="form-group row">
<label class="col-4 col-form-label">Date<span class="text-danger">*</span></label>
<div class="col-7">
<input type="text"
appDatePicker
[disabled]="currentOperation === 'view' || currentOperation ==='delete'"
required
value="{{holiday.off_date}}"
name="description"
[(ngModel)]="holiday.off_date"
class="form-control"
placeholder="01/01/2014">
</div>
</div>
指令
import {Directive, ElementRef, forwardRef, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
declare const $: any;
@Directive({
selector: '[appDatePicker]',
providers: [{
provide: NG_VALUE_ACCESSOR, useExisting:
forwardRef(() => DatePickerDirective),
multi: true
}]
})
export class DatePickerDirective implements OnInit, ControlValueAccessor {
value: string;
constructor(private el: ElementRef) {
}
ngOnInit() {
$(this.el.nativeElement).datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd/mm/yyyy'
}).on('change', e => this._onChange(e.target.value));
}
private _onChange(_) {
}
private _onTouched(_) {
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
}
writeValue(val: string): void {
this.value = val;
}
}
我担心这个问题与我之前提出的问题有关。 Link 这个问题是 here
我刚试过禁用属性,也许其他属性也不起作用。
非常感谢任何帮助。
经过搜索,我发现 ControlValueAccessor 有一种方法可以用来禁用状态。加上这个可以达到以下效果
setDisabledState(isDisabled: boolean): void {
$(this.el.nativeElement).attr('disabled', isDisabled);
}
我有一个输入字段在添加指令后没有被禁用。如果删除该指令,它就可以正常工作。
<div class="form-group row">
<label class="col-4 col-form-label">Date<span class="text-danger">*</span></label>
<div class="col-7">
<input type="text"
appDatePicker
[disabled]="currentOperation === 'view' || currentOperation ==='delete'"
required
value="{{holiday.off_date}}"
name="description"
[(ngModel)]="holiday.off_date"
class="form-control"
placeholder="01/01/2014">
</div>
</div>
指令
import {Directive, ElementRef, forwardRef, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
declare const $: any;
@Directive({
selector: '[appDatePicker]',
providers: [{
provide: NG_VALUE_ACCESSOR, useExisting:
forwardRef(() => DatePickerDirective),
multi: true
}]
})
export class DatePickerDirective implements OnInit, ControlValueAccessor {
value: string;
constructor(private el: ElementRef) {
}
ngOnInit() {
$(this.el.nativeElement).datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd/mm/yyyy'
}).on('change', e => this._onChange(e.target.value));
}
private _onChange(_) {
}
private _onTouched(_) {
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
}
writeValue(val: string): void {
this.value = val;
}
}
我担心这个问题与我之前提出的问题有关。 Link 这个问题是 here
我刚试过禁用属性,也许其他属性也不起作用。
非常感谢任何帮助。
经过搜索,我发现 ControlValueAccessor 有一种方法可以用来禁用状态。加上这个可以达到以下效果
setDisabledState(isDisabled: boolean): void {
$(this.el.nativeElement).attr('disabled', isDisabled);
}