Question

在我的Anuglarjs 1.5应用程序中，我有很多带有表单的页面。

我想采用一些机制来禁用某些表单，当我搜索它时，我发现用formset封装表单元素并使其禁用就可以了。当我测试它工作，但只有输入和按钮被禁用，而不是可点击的元素，如（divs，span，icon ......）。

所以我决定做的是创建一些函数来添加一个字段集，并在我满足条件时将其设置为禁用，以使我的表单元素只读，但我不知道如何访问form direcive所以我可以创建一个post link函数来执行该函数。

我该如何解决这个问题？

Answer 1

您不能使整个表单只读或禁用。您需要只读或禁用单个输入。

您可以使用表单元素并使用或ng-readonly attribute

这是一个工作示例

＆＃13;

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    Name: <input type="text" ng-model="firstname">
    <br/>
    <br/>
    Disabled Name: <input type="text" ng-model="firstname" ng-disabled="true">
    <br/>
    <br/>
    Readonly Name: <input type="text" ng-model="firstname" ng-readonly="true">
  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});
</script>

</body>
</html>

＆＃13;

<强>更新

如果您无法使用上述方法并想要禁用每个表单，则可以使用以下代码。 您可以替换＆＃34;禁用＆＃34;属性为＆＃34; readonly＆＃34; 。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="formCtrl">
  <form name="form1">
    First Name: <input type="text" ng-model="firstname">
    <br/>
    First Name: <input type="text" ng-model="firstname">
    <br/>
    First Name: <input type="text" ng-model="firstname">
    <br/>
  </form>
  <form name="form2">
  <input type="text" ng-model="firstname">
  <textarea type="text" ng-model="firstname">
  </textarea>
  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
    
    angular.forEach(document.forms,(f)=>{
       angular.forEach(f.children,(i)=>{
          i.setAttribute("disabled", "disabled");
       });
    });
});
</script>

</body>
</html>

＆＃13;

在Angularjs中将整个表单设为只读

1 个答案: