How to implement click event for setdisabledstate text box in angular

control value accessor reactive forms
controlvalueaccessor
registeronchange not called

I'm using controlvalueaccessor for my reactive form where i'm having one text box which is disable one for that i'm using setdisabledstate function .

Now i need to write a click event for that text box ,I stuck in that part , whether it is possible or not.Kindly suggest me some solution. .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 {
      }
    }

Try this one help you

 set isDisabled(value: boolean) {
     this._isDisabled = value;
     if(value) {
      this.form.controls['name'].disable();
     } else {
        this.form.controls['name'].enable();
      }
    }
<input type="text" class="form-control" [value]="val" [disabled]="isDisabled"' name="name" [(ngModel)]="name"/>  

Angular Custom Form Controls Made Easy, I'm using controlvalueaccessor for my reactive form where i'm having one text box which is disable one for that i'm using setdisabledstate� And then a button with (click) event like you have: <button type="button" (click)="changeInputVar()">Test Change</button> And again in your .ts you have the changeInputVar() defined: private changeInputVar(): void { this.inputVar = "changed"; } Here is a demo.

Try this one

fileInputClick = (event) => {
   alert("sss")
    // Do what you want
  }
<div>
  <div>
    <input type="text">
  </div>
  <div (click)="fileInputClick($event)" >
    <input type="text" disabled="disabled">
  </div>
</div>

ControlValueAccessor, setDisabledState —. This function is called when the control status changes to or from DISABLED . Depending on the value, it will enable or� The (click) to the left of the equals sign identifies the button's click event as the target of the binding. The text in quotes to the right of the equals sign is the template statement, which responds to the click event by calling the component's onClickMe method. When writing a binding, be aware of a template statement's execution context. The identifiers in a template statement belong to a specific context object, usually the Angular component controlling the template.

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"/>  

DefaultValueAccessor, Forms for User Input Implement this interface to create a custom form control directive that integrates with Angular Registers a callback function that is called when the control's value changes in the UI. setDisabledState(isDisabled: boolean): void { this. About � Resource Listing � Press Kit � Blog � Usage Analytics� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Understanding Angular's Control Value Accessor Interface, The registered callback function called when an input event occurs on the input element. onTouched: () => { } value accessorlink. The following example shows how to use an input element that activates the default value accessor (in this case , a text field). boolean): void. setDisabledState(isDisabled: boolean): void� The AngularJS ng-click directive is used to assign click events to HTML elements like Button. Implement Button click event using ng-click directive in AngularJS The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.

Don't reinvent the wheel when implementing ControlValueAccessor , How to use Angular's Control Value Accessor Interface to conquer all form control that behaves the same as a regular input or radio button. The registerOnTouched method should be called whenever our UI is interacted with - like a blur event. The setDisabledState method is called in 2 situations:. <button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button> Let me know if that works. As the form itself will validate automatically and constantly in anycase, you dont need to call for it to be done.

Using ControlValueAccessor to Create Custom Form Controls in , You might have already know the technique of implementing is everywhere in your app), which contains an input element and a button, and the button click simply clears the input: setDisabledState(isDisabled: boolean): void { and it's field valueAccessor is already there in Angular and we just need to� Usuallly you would do this with an output (event) binding, which can be done in the HTML-Template: <button (click)="onClick ($event)">Click Me</button> The “ (click)” is the so called output or event binding. Basically, everytime the button is clicked, the given function (in this case “onClick”) is called.

Comments
  • not button ,simply need click event like on touching the text box need to open another page,but in my case the text box is disable one.
  • So even when the button is disabled you want click event on text box element?
  • Yes you're correct,i need that functionality
  • Can't you add click event on app-c-display component?
  • actually i want to write click event for that disable text box,like if i click that text box i need to route to another page
  • When this isDisabled() will called ?
  • called automatically by angular if disabled value changed