Abhay Sharma Abhay Sharma - 3 months ago 10
AngularJS Question

How to enable text fields on other text field click?

I am using angularjs for my form , as form load i want to disable some field, after click on a text field disable fiels should be enable. i struggle a lot on it please help me to solve that. here is my HTML



<!doctype html>
<html lang="en" ng-app="signup">
<head>
<title>Sign Up</title>
<jsp:include page="/WEB-INF/pages/app/cmn/cmnIncludes.jsp" />
<%-- Including login_controller.js file
- Date: 30Aug2016 | Author(s): Abhay Sharma --%>
<script type="text/javascript" src="/static/app/components/signup/signup_controller.js"></script>
<%-- Including login_service.js file
- Date: 30Aug2016 | Author(s): Abhay Sharma --%>
<script type="text/javascript" src="/static/app/components/signup/signup_service.js"></script>

<%--Including location.js --%>
<script type="text/javascript" src="/static/assets/js/location.js"></script>


<%--Loading the library for Google place Autocomplete --%>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAD6LkAYd9yRpx5YlhRaRYbJClMutkxvpg&libraries=places&callback=initAutocomplete"
async defer></script>

</head>

<body class="index-page signup-page">
<!-- Navbar -->
<jsp:include page="/WEB-INF/pages/app/cmn/header.jsp" />
<!-- end navbar -->

<!-- content: signup -->
<div class="wrapper headerMargin" ng-controller="signupController">
<div class="header header-filter" style="background-image: url('../assets/img/city.jpg'); background-size: cover; background-position: top center;">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-offset-2">
<div class="card card-signup">
<form class="form" method="" action="" name="signupForm">
<div class="header header-primary text-center">
<h4>Sign Up</h4>
</div>
<div class="content">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" class="form-control" placeholder="Person Name" ng-model="user.personName" required>
</div>

<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">business</i>
</span>
<input type="text" class="form-control" placeholder="Firm Name" ng-model="user.firmName" required>
</div>

<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">email</i>
</span>
<input type="email" class="form-control" placeholder="Email" ng-model="user.email" required>
</div>

<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" placeholder="Password" class="form-control" ng-model="user.password" required/>
</div>

<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">call</i>
</span>
<input type="tel" class="form-control" placeholder="Phone Number" ng-model="user.number" required />
</div>

<div class="input-group" id="locationField">
<span class="input-group-addon">
<i class="material-icons">place</i>
</span>
<input type="text" id="autocomplete"class="form-control" placeholder="Location" ng-model="user.place" onFocus="geolocate()" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Street Address 1" id="street_number"ng-model="streetAddr1" required="required" />
</div>

<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Street Address 2" id="route"ng-model="streetAddr2" required="required" />
</div>

<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="City" id="locality" ng-model="city" required="required" />
</div>

<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="State" id="administrative_area_level_1" ng-model="state" required="required" />
</div>

<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Zip Code" id="postal_code"
ng-model="zip" required="required" />

</div>

<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Country" id="country" ng-model="country" required="required" />
</div>
</div>
</div>
<!-- If you want to add a checkbox to this form, uncomment this code
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" checked>
Subscribe to newsletter
</label>
</div>
-->
</div>
<div class="footer text-center">
<a href="#pablo" class="btn btn-simple btn-primary btn-lg"
ng-click="signup()" ng-disabled="signupForm.$invalid">Signup</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- footer -->
<jsp:include page="/WEB-INF/pages/app/cmn/footer.jsp" />
<!-- end footer -->
</div>
</div>
<!-- end content -->


</body>
</html>





I want to disable all fields after place and as user focus on Place , so disable field should be enable.

Answer

I will give you a very simple example for your problem.If you disable a input textbox then it will not capture events. You can do one thing put input element within a div and then call your function for enable it .

I have written code for this have a look.

<!DOCTYPE html>
<html>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         Click to enable
         <div ng-click="enableMe()" >
            <input type="text" ng-model="name" id="inputbox" disabled >
         </div>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
             $scope.enableMe = function (){
                var element = angular.element( document.querySelector( '#inputbox' ) );
                element.removeAttr("disabled");
             }

         });
      </script>
   </body>
</html>