CODEWITHSUNDEEP
angular
simonLeClerc
simonLeClerc

Reputation: 67

Angular2 disable input/select with attribute in template

After updating to RC6 I have problem with select that are disabled depending on a variable like this : https://plnkr.co/edit/h1KktXxEfhypHEgefDWQ?p=preview

I already take a look at this warning message with disabled option set to true at the creation of the control but it doesn't fit my need as this can't be dynamic (I have to call .disable() / .enable())

Here is some code in case plnkr does not work :

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      //this select is disabled
      <select formControlName="control1" disabled>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
      </select>

      //This select isn't disabled after RC6 update
      <select formControlName="control2" [disabled]="true">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
      </select>
    </form>
  `,
})
export class App {
  form:FormGroup;
  constructor() {
    this.form = new FormGroup({
      control1: new FormControl('2');
      control2: new FormControl('2');
    });
  }
}

Note : This may be a duplicate of angular2 will not disable input based on true or false condition but this question was not clear to me and I am not able to comment yet

Upvotes: 1

Views: 6468

Answers (2)

simonLeClerc
simonLeClerc

Reputation: 67

I finally get the same behavior by creating a custom directive :

import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[customDisabled]' })
export class CustomDisabledDirective {

    @Input() customDisabled : boolean;
    constructor(private el: ElementRef, private renderer: Renderer) {}

    ngOnChanges() {
        if(this.customDisabled) {
            this.renderer.setElementAttribute(this.el.nativeElement, 'disabled', 'true');
        } else {
            this.renderer.setElementAttribute(this.el.nativeElement, 'disabled', null);
        }
    }
}

I now use [customDisabled]="myVar"instead of [disabled]="myVar".

Upvotes: 3

Karan Desai
Karan Desai

Reputation: 3142

I think you cannot use disabled as directive. You will have to use events to dynamically enable or disable HTML element as demoed below:

     @Component({
      selector: 'my-app',
      template: `
        <form [formGroup]="form">

          ---
          ---

           //I have applied function on change event; you can use click, onload, etc
          <select id="id1" formControlName="control2" (change)="scope()">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
          </select>
        </form>
      `,
    })
    export class App {
      form:FormGroup;
     scope()
     {
        document.getElementById("id1").disabled=true;
    }
          constructor() {
            this.form = new FormGroup({
              control1: new FormControl('2');
              control2: new FormControl('2');
            });
          }
        }

Upvotes: 0

Related Questions