Angular 2 - 自定义表单控件 - 禁用

Posted

技术标签:

【中文标题】Angular 2 - 自定义表单控件 - 禁用【英文标题】:Angular 2 - Custom Form Control - Disable 【发布时间】:2017-03-02 23:33:00 【问题描述】:

我使用 ControlValueAccessor 创建了一个自定义控件,该控件由 input[type=text] 和一个日期选择器组成。

当我在模板驱动的表单中使用它时,一切正常。 但是当我使用模型驱动的方法(反应式表单)时,表单控件上的disable() 方法似乎没有任何效果。

是否可以像在模型驱动表单中使用其他所有表单控件一样以编程方式禁用/启用我的自定义控件

编辑

我应该注意,我使用的是 Angular v2.1.0,并且我的方法与 this 几乎相同,因为我一直使用它作为指南。

编辑

这是我的自定义控件:

@Component(
  selector: 'extended-datepicker',
  templateUrl: './extended-datepicker.component.html',
  styleUrls: ['./extended-datepicker.component.scss'],
  providers: [
    
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ExtendedDatepickerComponent),
      multi: true
    
  ]
)
export class ExtendedDatepickerComponent implements OnInit, ControlValueAccessor 
  isDatepickerActive: boolean = false;
  _selectedDate: Date;
  selectedDateString: string = "";
  @Input() disabled: boolean;
  @Input() mask: any;
  @Input() required: boolean;

  @ViewChild('textInput') textInput: ElementRef;

  get selectedDate(): Date 
    return this._selectedDate;
  

  set selectedDate(value: Date) 
    this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    this._selectedDate = value;
  

  propagateChange: Function;

  @ViewChild(DatePickerComponent) datepicker: DatePickerComponent;

  constructor() 
  

  writeValue(value: Date) 
    if (value) 
      this.selectedDate = value;
      this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    
  

  registerOnTouched(): void 
  

  registerOnChange(fn: Function) 
    this.propagateChange = fn;
  
  // ...

这是控件的模板:

<div class="calendar-wrapper row-small-margin" 
     (clickOutside)="isDatepickerActive = false;">

  <div class="col-xs-10 col-small-padding">
    <div class="input-group">

      <span class="input-group-addon" role="button" (click)="prevDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-left"></i>
      </span>

      <input #textInput [textMask]="mask: mask" 
             [(ngModel)]="selectedDateString" 
             (ngModelChange)="inputChange()"
             class="form-control" [required]="required" 
             [disabled]="disabled" (keyup)="onKeyPressed($event)">

      <span class="input-group-addon" role="button" (click)="nextDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-right"></i>
      </span>
    </div>

    <div *ngIf="isDatepickerActive" class="datepicker-wrapper">
      <datepicker [(ngModel)]="selectedDate" (ngModelChange)="dateChange()" 
                  [showWeeks]="false" [required]="required"
                  [formatDay]="dd" [formatMonth]="MM" [formatYear]="yyyy" 
                  [disabled]="disabled">
      </datepicker>
    </div>
  </div>

  <div class="col-xs-2 col-small-padding">
    <button class="btn btn-sm btn-datepicker" [disabled]="disabled"
        (click)="toggleDatePicker()" type="button">
      <img src="/assets/img/image.png">
    </button>
  </div>

</div>

这就是我在表单组件中所做的:

this.myForm.controls['pickDate'].valueChanges.subscribe(val => 
  if (!val) 
    this.myForm.controls['date'].disable(); // This line here does nothing
  
);

如何在我的扩展日期选择器中响应 disable() 调用并采取相应措施?

【问题讨论】:

请添加代码 【参考方案1】:

您的组件需要实现在ControlValueAccessor 接口中定义的setDisabledState 函数(参见docs)。

例如(假设已经在构造函数中注入了渲染器):

setDisabledState(isDisabled: boolean) 
    this.renderer.setElementProperty(this.textInput.nativeElement, 'disabled', isDisabled);
    // disable other components here

【讨论】:

想象一下,我已经查看了该文档大约一千次,但我从未注意到 setDisabledState 方法...非常感谢!

以上是关于Angular 2 - 自定义表单控件 - 禁用的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 自定义表单输入

Angular2- RC6 自定义表单控件不起作用

如何使用 Angular 重置自定义表单控件

Angular 反应式表单自定义控件异步验证

来自 FormGroup 的禁用控件(表单自定义表单控件的一部分)被父级中的 .getRawValue() 排除

验证不会传播到 Angular 中的自定义表单控件 ng-select