选项卡集中的角度 JS 表单验证给出错误：类型错误：无法读取未定义的属性'$valid'

Html:

<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE" >
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" required />
            <button type="submit" ng-click="CSsalesVRRESave()" >submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE" >
        <div>somthing inside it</div>
    </tab>
</tabset>

Javascript函数

$scope.CSsalesVRRESave = function () {
            console.log($scope.motorForm.$valid);
        }

输出控制台给我错误类型错误：

无法读取未定义的属性"$valid"：

注意：如果我删除选项卡集，它将按照要求工作。

var app = angular.module('testApp', [ ]);
app.controller('testController', ['$scope', '$location', function ($scope, $location) {
$scope.CSsalesVRRESave = function (motorForm) {
     if(motorForm.$valid==true){
  
  alert($scope.ngtext)
  } else{
    alert("Please Enter some value");
    }
};
  
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp"  ng-controller="testController">
<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" ng-required="true"/>
            <button type="submit" ng-click="CSsalesVRRESave(motorForm)">submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <div>somthing inside it</div>
    </tab>
</tabset>
  </body>

<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" required/>
            <button type="submit" ng-click="CSsalesVRRESave(motorForm)">submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <div>somthing inside it</div>
    </tab>
</tabset>

$scope.CSsalesVRRESave = function (motorForm) {
    console.log(motorForm.$valid);
};

我没有足够的因果报应来评论，Nelson的答案是有效的，但你最初看到这个问题的原因是选项卡集创建了一个新的子$scope，所以motorForm是该选项卡的$scope的一部分。ng-click转到父$scope中的函数，该函数没有这种形式

另一种方法是让你的表单成为父$scope上的整体表单对象的值，这样它们将通过引用访问，它将按照你的期望进行访问。比如，在你的控制器中有$scope.forms = {}，然后在你的模板中有

<div ng-form="forms.motorForm">

而不是您的正常形式。

相关内容

最新更新

热门标签：