5

i have the following part of html template:

<div class="row">
    <div class="medium-3 columns">
        <label>Category
        <select [(ngModel)]="item.cat" name="cat" required>
            <option *ngFor="let a of categories" [ngValue]="a">{{a.name}}</option>
        </select>
        </label>
    </div>

    <div class="medium-3 columns">
        <label>Categoria
        <select [(ngModel)]="item.place" name="place" [disabled]="!item.cat">
            <option *ngFor="let c of places" [ngValue]="c">{{c.name}}</option>
        </select>
        </label>
    </div>
</div>

As you can see the second select is disabled until the users choose one option from first select. So if the users choose an option from the first select, the second select become active.

Now i want to add required attribute even to the second select. But if i do it the second select is always disabled.

Isn't this behaviour weird?

Here is the Plunker (thanks to Stefan Svrkota).

smartmouse
  • 13,912
  • 34
  • 100
  • 166
  • 2
    Well, I just tried to re-create this problem, but your code works fine for me. Here's plnkr with expected behaviour of your code, check it out: http://plnkr.co/edit/QX3LfN – Stefan Svrkota Sep 12 '16 at 10:47
  • You might need to update to the latest Angular2 version. – Günter Zöchbauer Sep 12 '16 at 10:59
  • @GünterZöchbauer I have already the latest version (RC6). – smartmouse Sep 12 '16 at 11:20
  • 1
    @StefanSvrkota Your code works but doesn't do what i need. You add `disabled` on `option` tag instead of `select`. I want that the items of the second `select` menu are nor selectable nor visible. – smartmouse Sep 12 '16 at 11:22
  • The mistery deepens: it works if there are positive conditions for Angular disabled tag. For example if i use [disabled]="firstSelect" instead of [disabled]="!firstSelect" it works with no problems. – smartmouse Sep 12 '16 at 12:47

1 Answers1

0

[disabled] works on a boolean expression if expression returns/evaluates to true it will be disabled otherwise not. In your case you have bind the disabled property with a number value. which is evaluating nothing

Deepender Sharma
  • 460
  • 1
  • 5
  • 25