首页 > 解决方案 > 如何在角度中实现setdisabledstate文本框的点击事件

问题描述

我正在使用controlvalueaccessor我的反应式表单,其中我有一个文本框,该文本框禁用了我正在使用的一个文本框setdisabledstatefunction 。

现在我需要为那个文本框写一个点击事件,我卡在那个部分,不管它是否可能。请给我一些解决方案。
.html

    <label>{{label}}</label>
        <input type="text" class="form-control" 
        [value]="val"
        [disabled]="disabled"
        data-col-index="0"/>  

.ts

    import { Component, OnInit, forwardRef, Input } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms';

    const CUSTOM_VALUE_ACCESSOR: any = {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CDisplayComponent),
      multi: true,
    };

    @Component({
      selector: 'app-c-display',
      templateUrl: './c-display.component.html',
      styleUrls: ['./c-display.component.css'],
      providers: [CUSTOM_VALUE_ACCESSOR]
    })
    export class CDisplayComponent implements OnInit, ControlValueAccessor {

      @Input() label: String;
      @Input() value: String;
      val: String;
      private disabled: boolean = true;
      private onChange: Function;
      private onTouched: Function;

      constructor() {
        this.onChange = (_: any) => { };
        this.onTouched = () => { };
      }

      ngOnInit() {
      }
      writeValue(obj: any): void {
        this.val = obj;   
        if(this.value != undefined){
          this.val= this.value;
        }

      }

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

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

      setDisabledState(isDisabled: boolean): void {
      }
    }

标签: angularangular-reactive-formscontrolvalueaccessor

解决方案


private disabled = false;     
isDisabled():boolean {
         return this.disabled;//should get updated control state changed dynamically
        }
setDisabledState(isDisabled: boolean): void {
 this.disabled = isDisabled;
      }
    <input type="text" class="form-control" [value]="val" [disabled]="isDisabled()" name="name" [(ngModel)]="name"/>  


推荐阅读