Question

我尝试使用 Angular 1.1.1 和 Ionic 为表单实现验证。

有很多＆＃34;钱包＆＃34;并且用户需要发送新的＆＃34;值＆＃34;到每个钱包。还有钱包的指定先前值。验证应检查是否填写了所有输入字段以及新值是否大于之前的值。

我的表单（index.html）：

<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl">
  <div class="row" ng-repeat="wallet in wallets">
    <div class="col item item-input-inset">
      <label class="item-input-wrapper item-text-wrap">
        <input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
      </label>
      <span ng-show="myForm.wallet_{{item.id}}.$error.required">!!!</span>
    </div>            
    <div class="col item">{{ wallet.previous }}</div>    
  </div>
  <button class="button" type="submit">Submit</button> 
</form>

它导致始终显示＆＃34; !!!＆＃34;即使用户尚未提交表单，空输入也会出错。我尝试在控制器中使用$scope.myForm.submitted=true;，但问题是只有填写了所有字段才会到达控制器。

我的控制器（values.js）：

'Use Strict';
angular.module('App')

.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
    $scope.sendValues = function(wallets){
      debugger;
      ...
})

任何人都可以帮我弄清楚为什么我不能看到调试器窗口，如果不是所有字段都带有信息？你能建议如何进行自定义验证吗？（新值应该比以前更大）

Answer 1

它导致始终显示＆＃34; !!!＆＃34;即使用户尚未提交表单，空输入也会出错？

您的ng-show应该是

ng-show="myForm.$submitted==true && myForm.wallet_{{item.id}}.$error.required"

如果您想要自定义验证，

和表单应具有novalidate属性

<form name="myForm" ng-submit="sendValues(wallets)" novalidate>

否则会执行默认的html验证

我尝试使用$ scope.myForm.submitted = true;在控制器中但问题是它只有在填写完所有字段时才到达控制器

因为ng-submit将为每个表单控件元素验证真实条件($valid==true)。

如果它是已填充且有效的数据，那么只有$valid标志设置为true否则不会。如果是$valid==true，您将能够在控制器中提交表单和函数get烧制

你可以使用

<input type="submit" ng-click="sendValues(wallets)" value="Save" />

如果您想在没有验证的情况下提交表单并希望在控制器中进行验证

您可以从angular#form

了解更多信息

角度验证（如果必填字段为空，则无法到达控制器）

1 个答案: