angularjs - <form> 标签外部的 Angular 表单验证

Question

这是一个愚蠢的问题，但是是否有可能在 block 之外获取表单状态。就像，

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

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

因为按钮在表单标签之外，所以无法获取状态。
我们是否有另一种方法来实现相同的目标(可能使用其他语言)？

Answer 1

您可以在 Controller 范围内的任何位置使用表单对象，根据我的理解，AngularJs 将表单对象绑定(bind)到当前的 ctrl 范围，这就是我们能够在表单范围之外使用它的原因。 这是演示

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>