AngularJS hiding input field

Question

I am writing a login page with register and login options using AngularJS. There are three input fields: username, password and name. I want name field to appear when I click to register button and disappear when I click to login button. Therefore I want to change input field's class to 'hidden' on click and let css handle the job. How can I do it using AngularJS? Is there a better way to hide the name input field?

HTML:

<h2>Welcome to Mail Service</h2>

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="images/img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label><br>
    <input type="text" placeholder="Enter Username" name="uname" required ng-model="user.username"><br>
    <label><b>Password</b></label><br>
    <input type="password" placeholder="Enter Password" name="psw" required ng-model="user.password"><br>

    <!-- NAME INPUT FIELD -->
    <div class="textField-hidden">
        <label><b>Name</b></label><br>
        <input type="text" placeholder="Enter Name" ng-model="user.name">
    </div><br>

    <button type="submit" ng-click="login()">Login</button><br>
    <button type="submit" ng-click="register()">Register</button>
  </div>

</form>

AngularJS Controller:

app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
    function($scope, $resource, $location)
    {
        $scope.login = function()
        {
            var loginRequest = $resource('/api/login');

            loginRequest.save($scope.user, function(response)
            {
            });
        };

        $scope.register = function()
        {
            var registerRequest = $resource('/api/register');

            loginRequest.save($scope.user, function(response)
            {
            });
        };
    }]);

score 2 · Accepted Answer · answered Jul 05 '17 at 10:36

You need to use ng-hide or ng-show directive (based on your context), and provide it with appropriate condition value like this:

$scope.showName = false;

$scope.login = function() {
  // Your code
  $scope.showName = false;
}

$scope.register = function() {
  // Your code
  $scope.showName = false;
}

Change your HTML accordingly:

<input ng-show="showName" type="{{type}}" placeholder="Enter Name" ng-model="user.name">

In this way, the input box will be shown only if the expression of ng-show evaluates to true. Alternatively, ng-if can be used similar to ng-show, but it works a bit different.

Vivz · Answer 2 · 2017-07-05T10:48:26.297

You can use a variable for input fields type and hide it

HTML:

<input type="{{type}}" placeholder="Enter Name" ng-model="user.name">

JS:

app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
    function($scope, $resource, $location)
    {
        $scope.login = function()
        {
            $scope.type="hidden";
            var loginRequest = $resource('/api/login');

            loginRequest.save($scope.user, function(response)
            {
            });
        };

        $scope.register = function()
        {
           $scope.type="text";
            var registerRequest = $resource('/api/register');

            loginRequest.save($scope.user, function(response)
            {
            });
        };
    }]);

An alternative will be to use ng-if or ng-hide/ng-show defined on a $scope variable and trigger a boolean value for this variable according to your needs.

score 1 · Answer 3 · answered Jul 05 '17 at 10:44

just populate a variable as true when you click register and set that variable as false when you click login.

<h2>Welcome to Mail Service</h2>

<form action="/action_page.php">
<div class="imgcontainer">
<img src="images/img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required ng-model="user.username"><br>
<label><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required ng-model="user.password"><br>

<!-- NAME INPUT FIELD -->
<div class="textField-hidden" ng-show="register">
    <label><b>Name</b></label><br>
    <input type="text" placeholder="Enter Name" ng-model="user.name">
</div><br>

<button type="submit" ng-click="login()">Login</button><br>
<button type="submit" ng-click="register()">Register</button>

now populate $scope.register as true when you click register

 app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
function($scope, $resource, $location)
{
   $scope.register=false; 
   $scope.login = function()
    {
        var loginRequest = $resource('/api/login');
        $scope.register=false;
        loginRequest.save($scope.user, function(response)
        {
        });
    };

    $scope.register = function()
    {
        var registerRequest = $resource('/api/register');
            $scope.register=true;

        loginRequest.save($scope.user, function(response)
        {
        });
    };
}]);

you can even use ng-if if you want to remove the username feild completly from dom. ng-show and ng-hide will just make the style proprty as hide/show. DOM exist — ASLAM TP, Jul 05 '17 at 10:46

AngularJS hiding input field

HTML:

AngularJS Controller:

3 Answers3