Disabled directive in angular

by jeevan, posted in Angular

Problem:

When using reactive form in angular disabled property binding does not work in template.

Solutions:

  1. Using disable method programmatically in form control.
  2. Create directive

In my case I couldn’t use disabled since my input is not a control in form. It’s just a input in template.

So I created directive.

You can find it here. It might help some one having my requirement.

Live demo

import { Directive, ElementRef, Input } from ‘@angular/core’;
import { OnChanges } from ‘@angular/core/src/metadata/lifecycle_hooks’;

/**
* Directive for add disable attribute to input element
* Eg: [appInputDisabled]=”isDisabled”
* @export
* @class InputDisabledDirective
* @implements {OnChanges}
*/
@Directive({
selector: ‘[appInputDisabled]’
})

export class InputDisabledDirective implements OnChanges {
@Input() appInputDisabled: boolean;

constructor(private el: ElementRef) { }

ngOnChanges(): void {
this.el.nativeElement.disabled = (this.appInputDisabled) ? true : false;
}

}

Source code here ….

Code on stackblitz

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Google photo

You are commenting using your Google account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s