Angular 2 Update [disabled]

Question

I am trying to dynamically enable/disable a set of select inputs, based on the value of another select (true/false). However, it seems to only work on initial page load.

The form loads with the select inputs disabled. When I change the controlling input to true, the other inputs are now enabled.

However, they do not change back after that initial enable.

My code is as follows:

<tr *ngFor="let prod of seg.products">
    <td>{{prod.name}}</td>
    <td>
        <!-- The controlling selector -->
        <select [(ngModel)]="prod.isAffected" name="{{prod.name + 'AffectedSelector'}}">
            <option [value]="false" select>No</option>
            <option [value]="true">Yes</option>
        </select>
    </td>

    <!-- These load as disabled and can be changed only once -->
    <td *ngFor="let plat of platformList;let j=index">
        <select  name="{{prod.name + 'NASelector' + j}}" [disabled]="prod.isAffected">
            <option value="false" selected>No</option>
            <option value="true">Yes</option>
        </select>
    </td>
</tr>

In the component, I have tried initializing the isAffected value as both false and null with the exact same resultes.

I have also tried using prod.isAffected ? true : null (and false).

I have also tried to just use [ngClass]={'disabled' : prod.isAffected}.

Am I missing something?

If you change out a select for a button or input does it work? Just trying to rule out the select as an issue. — Stephen Wilson, Jul 21 '17 at 14:46

score 1 · Answer 1 · answered Jul 21 '17 at 14:52

1

I've been doing some reading on this and it seems that from RC6 they removed the ability to bind to this in a two way manner. Now you have to monitor the control for change events and call .enable() or .disable() depending on your conditions.

Another SO question can be found here and the actual Angular issue being tracked on Github here

answered Jul 21 '17 at 14:52

Stephen Wilson

1,484
1
15
30

Thanks for the tip. When you say use `.enable()`/`.disable()`, do you mean retrieving the select elements from the DOM and calling those methods on them from the component? – Mac Jul 21 '17 at 15:25
1

Yes, subscribe to the `onChange` event and you can get the element from the `$event` parameter in the eventHandler. – Stephen Wilson Jul 21 '17 at 15:27

score 1 · Accepted Answer · answered Jul 21 '17 at 15:34

Your problem is caused because you are using [value]="true" on your option. This by default is binding a string to your [(ngModel)] that could not be interpreted as boolean on [disabled]. You should use instead [ngValue] and the problem is fixed.

    <div *ngFor="let prod of products">
    <div>
      <select [(ngModel)]="prod.isAffected" name="{{prod.name + 'AffectedSelector'}}">
            <option [ngValue]="false">No</option>
            <option [ngValue]="true">Yes</option>
      </select>
      <select  name="{{prod.name + 'NASelector'}}" [disabled]="!prod.isAffected">
            <option value="false">No</option>
            <option value="true">Yes</option>
        </select>
    </div>
    </div>

I made a working plunkr for you https://plnkr.co/edit/fCms5SMxTGLjE9KzXwBC?p=preview

score 0 · Answer 3 · answered Jul 21 '17 at 15:38

If you are using a form, which it seems you are....

You are just missing detail, namely ngModel in your second select. This binds the field to the form, makes it as a form control in your form.

<select name="{{prod.name + 'NASelector' + j}}" ngModel 
         [disabled]="prod.isAffected">
   <option value="false" selected>No</option>
   <option value="true">Yes</option>
</select>

Demo: http://plnkr.co/edit/iZyicZLUC1IYHcAsA9zx?p=preview

Angular 2 Update [disabled]

3 Answers3

Linked