AngularJS model based input value empty when disabled

Question

AngularJS client application.

I have a form with two text inputs and a drop down listbox. Only one of the two text inputs is enabled, the selected item in the listbox determines which input is enabled.

The two text inputs are associated with fields in the model. However, when a text input is disabled, I would like the value to be cleared, not visible in a disabled state. When the input is enabled again, the model value should be displayed.

What is the best way to achieve this with AngularJS?

Answer 1

Angular Expression can be used with ngDisabled directive. Use ternary operator to check if selected value is equal to name of the input field and based on that set ngDisabled. If the expression is truthy, then the disabled attribute will be set on the element.

Something like this in your html template.

ngDisabled = "($scope.input_model_variable_name !=    $scope.select_model_variable_name)?true:false"

Answer 2

One way to go about it would be

Call a function on ng-change on select.

-- copy all the values to restore later

-- blank all the text fields except for the field you want to edit

Have a function for ng-disable

-- disable the not selected text box

-- enable the rest

var app = angular.module('testApp', []);
app.controller('MainCtrl', function ($scope) {

    var modelCopy = {
        inputTextField1: "",
        inputTextField2: ""
    };

    $scope.data = {
        inputTextField1: "",
        inputTextField2: "",
        selectedInputField: ""
    };

    $scope.inputFieldChanged = function () {

        angular.forEach(modelCopy, function (value, key) {
            modelCopy[key] = $scope.data[key];
            if (this.selectedInputField === key) {
                this[key] = value;
            } else {
                this[key] = "";
            }
        }, $scope.data);

    };

    $scope.toggleDisability = function (fieldToEnable) {
        if ($scope.data.selectedInputField === fieldToEnable) {
            return false;
        } else {
            return true;
        }
    };
});

HTML

<div ng-controller="MainCtrl">
    <div class="container">
        <form novalidate="novalidate" class="form-horizontal">
            <div class="form-group">
                <label for="selectInputFieldToEdit" class="control-label col-sm-2">Select Input Field to Edit</label>
                <div class="col-sm-6">
                    <select class="form-control" ng-change="inputFieldChanged()" id="selectInputFieldToEdit" ng-model="data.selectedInputField">
                        <option value="inputTextField1">Field 1</option>
                        <option value="inputTextField2">Field 2</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputTextField1" class="control-label col-sm-2">Input Text Field 1</label>
                <div class="col-sm-6">
                    <input id="inputTextField1" type="text" ng-model="data.inputTextField1" name="inputTextField1" class="form-control" ng-disabled="toggleDisability('inputTextField1')" />
                </div>
            </div>
            <div class="form-group">
                <label for="inputTextField2" class="control-label col-sm-2">Input Text Field 2</label>
                <div class="col-sm-6">
                    <input id="inputTextField2" type="text" ng-model="data.inputTextField2" name="inputTextField2" class="form-control" ng-disabled="toggleDisability('inputTextField2')" />
                </div>
            </div>
        </form>
    </div>
</div>

Here is a jsFiddle https://jsfiddle.net/hheymu/jpydjuhp/