How to make input text disabled until edit button is clicked in AngularJS?

Question

I have created an edit button and a form. I can't get my input disabled until edit button is clicked.
All I want to do is make input disabled and when the user clicks on the edit button they should be able to edit the text.

Here is my code:

<div ng-controller="MyCtrl">
    <a class="edit" ng-click="inactive = !inactive">Edit</a>

    <form>
        <b>First Name:</b>
        <input type="text" ng-disabled="inactive" ng-model="input1" value="John">
        <br>
        <b>Last Name:</b>
        <input type="text" ng-disabled="inactive" value="Smith">
        <br>
        <b>Email:</b>
        <input type="email" ng-disabled="inactive" value="jsmith@email.com">
    </form>
</div>

App.js

function MyCtrl($scope) {
    $scope.inactive = false;
}

Your code should work as shown. Have you checked the browser console for errors? — Sunil D., Apr 20 '17 at 02:22

jackdon · Accepted Answer · 2017-04-20T02:48:27.787

0

You can add ng-click="changeStatus()" in you angular template.

the full code:

var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', ['$scope', function($scope) {
   $scope.inactive = true;
   $scope.changeStatus = function() {
      $scope.inactive = !$scope.inactive;
   };
}]);

edited Apr 20 '17 at 02:48

answered Apr 20 '17 at 01:53

jackdon

16
2

should I remove $scope.inactive = false? – Apr 20 '17 at 01:54
No, $scope.inactive = false gives the init status. – jackdon Apr 20 '17 at 01:57
should I do like this for my button: 'Edit' – Apr 20 '17 at 01:57
Yes.you got it. – jackdon Apr 20 '17 at 01:59
But, it just gets me an empty page now. – Apr 20 '17 at 02:00
e...sorry i forgot the import thing. you should inject the $scope in the controller function. I have modified the code. – jackdon Apr 20 '17 at 02:03
For some reason it doesnt work. can you please show me a fiddle or plunkr? – Apr 20 '17 at 02:05
by any chance you know how to keep it disabled? until they click on the edit button – Apr 20 '17 at 02:30

The.Bear · Answer 2 · 2017-04-20T15:52:29.697

0

To fix your code, you have to invert your boolean variable:

function MyCtrl($scope) {
    $scope.inactive = true;
}

But to disable whole form inputs in a cleaner way, put all your inputs inside a fieldset with ng-disabled and remove the ng-disabled from each input...

<form> 
    <fieldset ng-disabled="inactive">
        <b>First Name:</b>
        <input type="text" ng-model="name"><br>
        <b>Last Name:</b>
        <input type="text" ng-model="lastname"><br>
        <b>Email:</b>
        <input type="email" ng-model="email">
    </fieldset>
</form>

edited Apr 20 '17 at 15:52

answered Apr 20 '17 at 02:32

The.Bear

5,621
2
27
33

thank you. also, one last question. you know when user clicks on edit button automatically show that edit button as "submit" button? – Apr 20 '17 at 02:33
I don't fully understand what you want to do. You want to show a submit button when form is ensable and hide it when is disabled? Don't you? ... However, here you are a [plunker](https://plnkr.co/edit/camVvEIYvJUDFh20FRc1?p=preview)... try to update it and show me what you want to do. – The.Bear Apr 20 '17 at 02:37
Basically, what I want to do is, lets say the form is disabled, when you click on the edit button it will enabled the form to edit right. that edit button you have clicked "I want to switch it to submit button when in edit mode – Apr 20 '17 at 02:39
To do that, you have to use `ng-show/ng-hide`. Check the [plunker](https://plnkr.co/edit/camVvEIYvJUDFh20FRc1?p=preview) again – The.Bear Apr 20 '17 at 02:44
Do you know how to save() the form? When the user edits the form and hits save and reloads the page I want the updated version to show. – Apr 20 '17 at 22:45
Check this post (http://stackoverflow.com/questions/19985344/angularjs-simple-form-submit) and reas this tutorial (https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way) – The.Bear Apr 21 '17 at 12:45

How to make input text disabled until edit button is clicked in AngularJS?

2 Answers2