Angular2 disable input/select with attribute in template

Question

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

score 3 · Accepted Answer · answered Sep 08 '16 at 07:16

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

score 0 · Answer 2 · answered Sep 07 '16 at 10:56

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');
            });
          }
        }

Angular2 disable input/select with attribute in template

2 Answers2