CODEWITHSUNDEEP
angularjsangular-forms
Nate23VT
Nate23VT

Reputation: 423

Disable input based on dynamic model field

I am using a json form template file to dynamically generate the model for my form.

sample JSON:

{
    "displayName":"EID",
    "internalName":"EID",
    "fieldType":"text"
},
{
    "displayName":"Name",
    "internalName":"PersonName",
    "fieldType":"text"
},

Form HTML:

<div class="item-inner" ng-if="f.fieldType == 'text'">
   <div class="item-title item-label">{{f.displayName}}</div>
   <div class="item-input-wrap">
        <input type="text" placeholder="" name="{{f.internalName}}"
               ng-model="formData[f.internalName]"
               [disabled]="formData['EID'].length >1">
        <span class="input-clear-button"></span>
   </div>
</div>

JS file:

$scope.formData = {};

$scope.submit = function () {
            $http({
                method: 'POST',
                url: '/api/postForm',
                data: JSON.stringify(this.formData),
                headers: { 'Content-Type': 'application/json' }
            }).then(function (response) {
                console.log(response);
                alert('success');
            }, function (error) {
                alert('fail');
            });
        };

What does not seem to be working is my disabled statement - I am trying to make any field disabled if there is a value in the EID input field. I am not sure how to reference the dynamic model names. I also forsee an issue with the EID field disabling itself after input.

Upvotes: 0

Views: 1367

Answers (1)

ruedamanuel
ruedamanuel

Reputation: 1930

As it was mentioned in the comments, there is no [disabled] in angularjs (the square brackets in the template are a binding for the new angular), so the way to dynamically change your disabled state is by using the ng-disabled directive as follows:

<div class="item-inner" ng-if="f.fieldType == 'text'">
   <div class="item-title item-label">{{f.displayName}}</div>
   <div class="item-input-wrap">
      <input type="text" placeholder="" name="{{f.internalName}}"
           ng-model="formData[f.internalName]"
           ng-disabled="formData[f.internalName].length >1"/>
      <span class="input-clear-button"></span>
   </div>
</div>

Upvotes: 1

Related Questions