ilGiudice ilGiudice - 1 month ago 20
AngularJS Question

AngularJS input text disabled by select option

I've a simple form with a

<select>
and an
<input text>
; what I need is to disable the input text if the value of an option is true. This is my code:

<div class="form-group">
<label for="auth">{{ 'SETTINGS.SYSTEM.NET.WIFI.AUTH.LABEL' | translate }}</label>
<select name="auth" class="form-control" ng-model="wifi.securitytype">
<option value="true">{{ 'SETTINGS.SYSTEM.NET.WIFI.AUTH.NONE' | translate }}</option>
<option value="false">{{ 'SETTINGS.SYSTEM.NET.WIFI.AUTH.WEP' | translate }}</option>
<option value="false">{{ 'SETTINGS.SYSTEM.NET.WIFI.AUTH.WPA2' | translate }}</option>
</select>
</div>


<fieldset ng-disabled="wifi.securitytype">
<div class="form-group" ng-class="{'has-error':wifiForm.password.$invalid && !wifi.securitytype}">
<label for="password">{{ 'SETTINGS.SYSTEM.NET.WIFI.PASSWORD' | translate }}</label>
<input class="form-control" name="password" placeholder="{{ 'SETTINGS.SYSTEM.NET.WIFI.PASSWORD_PLACEHOLDER' | translate }}" ng-model="wifi.wpakey" ng-pattern='/^(?!\s*$).+/' ng-model-options="{ updateOn: 'blur' }">
<span class="help-block ng-hide" ng-show="wifiForm.password.$invalid && !wifi.securitytype">RICHIESTA PASSWORD DI RETE</span>
</div>
</fieldset>


The problem is that the
<fieldset>
is ever disabled. Where is my fault?

Answer

I think you expect the option values to be of a boolean type. But HTML attributes are always strings, so you should evaluate them in both cases, "true" or "false", as pointed here

Try to replace the ng-disabled condition with

<fieldset ng-disabled="'true' === wifi.securitytype">