Disable textbox inside an AngularJS Dynamic form

Question

I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.

$scope.copyText = function () {
    document.getElementById('copyText').disabled=true;
    document.getElementById('bName').disabled=true;
    document.getElementById('pName').disabled=true;
    // $('#bName').attr('disabled', true);
    //alert('#bName');

     $scope.LanguageFormData.language = [
            { bName:  document.getElementById('brandName').value, pName:  document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature:  document.getElementById('pfeatureNew').value, lIngredient:  document.getElementById('pingredientNew').value, lInstruction:  document.getElementById('pinstructionNew').value, languageCat: null }

    ];

My View looks like this

<div class="col-md-12" class="pull-right" >                                           
     <button  class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>

  </div>  

   </div>
   <div id="web" ng-repeat="languageItem in LanguageFormData.language">
        <div class="row col-xs-12">
               <div class="col-xs-6">
              <br/><br/>
      <div class="form-group">                                           
           <label class="col-md-6 control-label">Brand Name: </label>
                <div class="col-md-6">                                           
                     <input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName"   required/>

               </div> 
            </div><br/><br/><br/>
     <div class="form-group">                                           
           <label class="col-md-6 control-label">Product Name: </label>
                <div class="col-md-6">                                           
                    <input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
                      </div> 
             </div><br/><br/><br/>

Naren Murali · Accepted Answer · 2017-08-30 02:57:33Z

Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.

$scope.copyText = function () {
    $scope.disableThis=true;

     $scope.LanguageFormData.language = [
            { bName:  document.getElementById('brandName').value, pName:  document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature:  document.getElementById('pfeatureNew').value, lIngredient:  document.getElementById('pingredientNew').value, lInstruction:  document.getElementById('pinstructionNew').value, languageCat: null }

    ];

Suggestions:

I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML

HTML:

<div class="col-md-12" class="pull-right" >                                           
     <button  class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>

  </div>  

   </div>
   <div id="web" ng-repeat="languageItem in LanguageFormData.language">
        <div class="row col-xs-12">
               <div class="col-xs-6">
              <br/><br/>
      <div class="form-group">                                           
           <label class="col-md-6 control-label">Brand Name: </label>
                <div class="col-md-6">                                           
                     <input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName"   required/>

               </div> 
            </div><br/><br/><br/>
     <div class="form-group">                                           
           <label class="col-md-6 control-label">Product Name: </label>
                <div class="col-md-6">                                           
                    <input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
                      </div> 
             </div><br/><br/><br/>

Suggestions:

It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!

Collectives™ on Stack Overflow

Disable textbox inside an AngularJS Dynamic form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related