CODEWITHSUNDEEP
javascripthtmlangularjs
MrNew
MrNew

Reputation: 1414

remove value in a disabled input if value is not true

Input is initially disabled and will only enable if the condition is equal to value=2 then if you select back to value=1 input will be disabled (all good) but how can I remove the value the user typed in the input once its disabled again?.

http://jsfiddle.net/og4c4vzy/3/

     <div ng-app>
   <form action="" name="myForm">
     <select name="id" id="" ng-model="selectVal">
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
     </select>
      <input ng-model="number" type="text" ng-pattern="/^[0-9]{1,7}$/" ng-disabled="selectVal != 2" ng-bind="selectVal">  
             </form>
</div>

Upvotes: 0

Views: 884

Answers (4)

Gianca
Gianca

Reputation: 481

Maybe is not the best solutions, but it works. 

<div ng-app>
   <form action="" name="myForm">
     <select name="id" id="" ng-model="selectVal">
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
     </select>
      <span ng-if="selectVal <= 1"></span>
      <span ng-if="selectVal >= 2"><input ng-model="number" type="text" ng-pattern="/^[0-9]{1,7}$/" ng-disabled="selectVal != 2" ng-bind="selectVal"/><p ng-bind="number"></p></span>
   </form>
</div>

Try this update, you can play with "ng-if":

http://jsfiddle.net/og4c4vzy/5/

Upvotes: 0

Ignacio Villaverde
Ignacio Villaverde

Reputation: 1264

You could use ng-change for setting a function that will be called when the value of selectVal is modified. There you can set manually number= ""

Here is a plunker: http://plnkr.co/edit/asv9QnMmT5wSPW1ijvU5?p=preview

<form action="" name="myForm">
 <select name="id" id="" ng-model="selectVal" ng-change="number=''">
   <option value="1">Number 1</option>
   <option value="2">Number 2</option>
 </select>
  <input ng-model="number" type="text" ng-pattern="/^[0-9]{1,7}$/" ng-disabled="selectVal != 2" >  
  <p ng-bind="number"></p>
</form>

Upvotes: 1

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

TO make input empty, you have to use select ng-change event

Here is the working code : 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
   <form action="" name="myForm">
     <select name="id" id="" ng-model="selectVal" ng-change="number=''">
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
     </select>
      <input ng-model="number" type="text" ng-pattern="/^[0-9]{1,7}$/" ng-disabled="selectVal != 2" ng-bind="selectVal">  
   </form>
</div>

I hope this will help you.

Upvotes: 0

Indranil Mondal
Indranil Mondal

Reputation: 2857

You can try this:

<select name="id" id="" ng-model="selectVal" ng-change="number=''">

Upvotes: 0

Related Questions