<form>标记外部的Angular form验证

Question

这是一个愚蠢的问题，但有没有可能在代码块之外获得表单状态。喜欢,

<form name="form">
   <input type="text" name="name" required />
</form>

<button ng-disabled="form.$invalid"></button> 

因为，按钮在表单标签之外，所以无法获取状态。

我们有没有其他方法来达到同样的目的(可能是使用其他语言)？

Answer 1

你可以在你的控制器作用域中的任何地方使用form对象，在我看来，angularJs将form对象绑定到当前的ctrl作用域，这就是为什么我们能够使用它，在form作用域之外。

这里是演示的

​

angular
 .module('app', [])
 .controller('ctrl', AppCtrl)
 
 function AppCtrl() {
    this.showFormInfo = function(form) {
    console.log(form);
    }
    
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as ct">
<form name="form" novalidate>
   <input type="text" name="test" ng-required="true" ng-model="name" />
   <span ng-if="">plz input</span>
   <button ng-click="ct.showFormInfo(form)">inside save</button>
</form>
<button ng-click="ct.showFormInfo(form)">outside save</button>

​

Answer 2

你需要做两件事。

1. 将ng-模型添加到input
2. call angular函数中，方法是使用按钮中的ng-。

在下面的代码中尝试一下

<form name="form">
   <input type="text" name="test" ng--model="test" required />
</form>

<button ng-disabled="form.$invalid" ng-click="buttonClicked()"></button> 

现在您可以在buttonClicked()函数中访问测试。在控制器中添加此函数。

Answer 3

我发布的问题真的很好，可能对开发人员有用。

实际上，angular也在它的块之外保留了表单作用域。

但是永远不要在表单块中使用name="name"属性。否则，表单将根本不会被验证。

所以，答案是，你可以在<form>块之外获得表单状态(可能只适用于Angular)。