How to make an angular form read only and make it editable with edit button?

Question

Is there a way to make the entire Angular form read only and then editable when clicking edit?

Answer 1

This is how i do it, i create a css class using pointer-events, pointer-events: none prevents click, state or cursor options so:

.formdisabled
{
  pointer-events: none;
  opacity: 0.8;
}

Then in view i use ng-class on form like this:

<form ng-class="{'formdisabled': !disableForm}">
 <input type="text" ng-model="name">
</form>

In view add button to play with the disableForm:

<md-button ng-click="disableForm = !disableForm">Show/Hide Form</md-button>

Change opacity value if needed.

Answer 2

You can individually disable all the form elements as suggested in the current answer/comments, or you can wrap all of your form elements in a <fieldset> (more info) tag and then enable/disable everything in one step:

<form>
  <fieldset ng-disabled="myBooleanValue">
    <input type="text">
  </fieldset>
</form>

Answer 3

You can add ng-disabled="someBoolean" to your form elements, and set someBoolean to true when you click a button.

https://docs.angularjs.org/api/ng/directive/ngDisabled