【问题标题】:Disabled property not working after adding directive in Angular, working if no directive is present在Angular中添加指令后禁用的属性不起作用,如果没有指令存在
【发布时间】:2018-09-24 16:20:17
【问题描述】:

我有一个输入字段在添加指令后没有被禁用。如果该指令被删除,它工作得很好。

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


}

我担心这个问题与我之前提出的问题有关。该问题的链接是here

我刚刚尝试了禁用属性,可能其他属性也不起作用。

任何帮助将不胜感激。

【问题讨论】:

    标签: angular angular-directive angular-forms


    【解决方案1】:

    搜索后我发现 ControlValueAccessor 有一种方法可以用来禁用状态。添加这个可以达到以下效果。

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

    【讨论】:

      猜你喜欢
      • 2013-10-17
      • 1970-01-01
      • 1970-01-01
      • 2015-06-24
      • 2016-09-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多