AngularJS：如何从控制器引用表单的 $invalid 变量？答案

【问题标题】：AngularJS: How to refer to the $invalid variable of a form from the controller?AngularJS：如何从控制器引用表单的 $invalid 变量？
【发布时间】：2021-02-09 16:32:19
【问题描述】：

我正在使用 AngularJS 开发一个 Web 应用程序。我有一个问题：我的应用程序使用预定义的组件（由其他开发人员创建）作为各种形式的输入字段。这些字段对每个组件都有自己的自定义验证方法，我对它们一无所知。但是，我必须在我的控制器中有（布尔）信息来指示表单是否有效。我找到的解决方案是这样的：

HTML：

<form name="myForm"></form>
<form name="myForm">

        <custom-component-1
                                custom-property1="someString"
                                custom-property2="someString"                                    
        ></custom-component-1>

         <custom-component-2
                                custom-property1="someString"
                                custom-property2="someString"                                    
        ></custom-component-2>
    </div>
</form>

现在，如果我直接在我的模板中使用以下字符串：{{myForm.$invalid}} 它会正常运行，在屏幕上打印布尔值 true（如果有无效的内容）或布尔值 false（如果一切顺利）。我的问题是我不知道如何在运行时将这个变量映射到控制器中。当然有办法，但不幸的是我对 AngularJS 知之甚少！例如，如果在我的控制器中我使用这个变量，像这样：

console.log("My variable: ", myForm.$invalid)

输出值为undefined。

【问题讨论】：

标签： html angularjs forms controller

【解决方案1】：

html

<form name="varObj.myForm" ng-submit="formSubmitCall();">

        <custom-component-1
                                custom-property1="someString"
                                custom-property2="someString"                                    
        ></custom-component-1>

         <custom-component-2
                                custom-property1="someString"
                                custom-property2="someString"                                    
        ></custom-component-2>
    </div>
</form>

js

在控制器中将 varObj 初始化为：

    $scope.varObj = {};

    $scope.formSubmitCall = function(){
        console.log("My variable: ", $scope.varObj.myForm.$invalid);
    }

【讨论】：