如何使角度形式只读，并使用编辑按钮使其可编辑？

Question

有没有办法让整个Angular表单只读，然后在单击编辑时可编辑？

Answer 1

您可以按照当前答案/评论中的建议单独禁用所有表单元素，也可以将所有表单元素包装在<fieldset> (more info)标记中，然后在一个标记中启用/禁用所有内容步骤：

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

Answer 2

您可以在表单元素中添加ng-disabled="someBoolean"，并在点击按钮时将someBoolean设置为true。

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

Answer 3

这就是我的操作方式，我使用指针事件，指针事件创建了一个CSS类：没有一个会阻止单击，状态或光标选项，因此：

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

然后在视图中，我在这种形式上使用ng-class：

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

在视图中添加按钮以使用disableForm：

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

根据需要更改不透明度值。