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

simonLeClerc · Accepted Answer · 2016-09-08 07:16:19Z

3

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

answered Sep 8, 2016 at 7:16

simonLeClerc

672 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan Desai · Accepted Answer · 2016-09-07 10:56:31Z

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

Collectives™ on Stack Overflow

Angular2 disable input/select with attribute in template

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related