Question

当用户点击提交按钮我正在验证表格时，使用ng-click我正在调用函数，在这个函数中我传递form1。$ invalid，基于这个变量，我正在调整条件，如果条件为真，验证函数会调用，这里问题是移动是隐藏字段，这个隐藏字段还检查validation.how可以跳过或不验证移动字段隐藏状态，我试过下面的代码。

HTML ----

 <form name="form1" novalidate>
     <input ng-show="user" type="text" name="user" ng-model="frm1.user" />
    <p ng-show="form1.user.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
     <input ng-show="mobile" type="text"  name="mobile" ng-model="frm1.mobile" />
    <p ng-show="form1.mobile.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
    <button ng-click="SubmitForm(regForm.$invalid);">submit</button>
 </form>

脚本----

$scope.SubmitForm = function(val){

$scope.user= true;
$scope.mobile = false;
 if (if(val ===true){
            $scope.validation();
  }
}
$scope.validation = function(){
  $scope.requiredMsg="input fieldis required";
}

Answer 1

我建议更好的方法是在不使用 ng-if 时使用 ng-show 将移动输入从表单中取出而不是隐藏它>

Ng-if 将确保在条件为false时未在DOM树中呈现输入，因此，不会触发验证。

您可以对ng-if和ng-show之间的差异进行一些研究，以便更好地理解这两个指令。

Answer 2

尝试ng-if以避免验证。如果您希望移动设备跳过验证，请使用表达式将ng-if设为false。

语法：ng-if =“expression”

转到此链接以获取更多信息

https://docs.angularjs.org/api/ng/directive/ngIf

对于ng-if和ng-hide / ng-show之间的区别，请参阅以下链接

what is the difference between ng-if and ng-show/ng-hide

Answer 3

一些观察结果：

不使用ng-show隐藏和显示输入，只需使用<input type="hidden"... >字段mobile元素。
无需使用变量$scope.user和$scope.mobile来隐藏和显示输入。
在required输入字段中添加user属性，而不是mobile输入字段，因为您不想验证移动field。
使用SubmitForm(form1.$invalid)代替SubmitForm(regForm.$invalid)，因为您的表单名称为form1而不是regForm。

<强>样本

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.SubmitForm = function(val) {
       console.log(val);
        if(val === true) {
            $scope.validation();
        }
    }
$scope.validation = function() {
  $scope.requiredMsg="input fieldis required";
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="form1" novalidate>
     <input type="text" name="user" ng-model="frm1.user" required/>
    <p ng-show="form1.user.$error.required">{{requiredMsg}}</p>
     <input type="hidden" name="mobile" ng-model="frm1.mobile" />
    <button ng-click="SubmitForm(form1.$invalid);">submit</button>
 </form>
</div>

如何在ng-click中验证隐藏字段？

3 个答案: