AngularJS检查控制器中的表单是否有效

slsn1g29  于 2023-02-28  发布在  Angular
关注(0)|答案(5)|浏览(149)

我需要检查控制器中的表单是否有效。
查看:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

在我的控制器中:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

我得到这个错误:

TypeError: Cannot read property '$valid' of undefined
pkln4tw6

pkln4tw61#

试试这个
鉴于:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

在控制器中:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};


鉴于:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

在控制器中:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};
fhity93d

fhity93d2#

我已将控制器更新为:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...
a0zr77ik

a0zr77ik3#

这是另一个解决方案
在html中设置一个隐藏的作用域变量,然后就可以在控制器中使用它了:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

以下是完整的工作示例:
x一个一个一个一个x一个一个二个x

nxowjjhe

nxowjjhe4#

BusinessCtrlcreateBusinessFormFormController之前被初始化。即使你在表单上有ngController也不会按照你想要的方式工作。你不能帮助这个(你可以创建你的ngControllerDirective,并试图欺骗优先级)。这就是angularjs的工作方式。
请参见以下plnkr示例:http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

rsl1atfo

rsl1atfo5#

我喜欢禁用保存/提交按钮,如果表格无效:

<form name="ruleForm">
    <md-input-container>
        <label>Priority</span>
        <input name="description" ng-model="vm.record.description" required>
    </md-input-container>
    <md-button ng-click="vm.save()" ng-disabled="ruleForm.$invalid" class="md-primary md-raised">Save</md-button>
</form>

相关问题