Question

我使用 Angular 1.1.1 和 Ionic 构建表单。

有很多＆＃34;钱包＆＃34;并且用户需要发送新的＆＃34;值＆＃34;到每个钱包。我的表单对所有字段进行了验证，这些字段在“提交”时正常工作。按下表单按钮。

但是，我还有每个钱包旁边的按钮，只向该钱包发送值（并非所有钱包都有不同的值）。当我按下它时，会出现所有验证错误，但我只需要为特定钱包显示错误。

我的表单（index.html）：

<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
  <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_{{wallet.id}}.$error.required">!!!</span>
    </div>            
    <div class="col item">{{ wallet.previous }}</div>
    <button ng-click="sendValue(wallet)">
      <i class="ion-android-send"></i>
    </button>
    <span class=ng-show="myForm.$submitted==true && myForm.wallet_{{wallet.id}}.$error.required">Required</span>
  </div>
  <button class="button" type="submit">Submit</button> 
</form>

我的控制器（values.js）：

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

.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
    $scope.sendValues = function(wallets){
      if ($scope.myForm.$valid) {
        ...
      } else {
        $scope.myForm.submitted = true;
      }
    },
    $scope.sendValue = function(wallet){
      if (wallet.value == null) {
        $scope.myForm.submitted = true;
      } else {
        ...
      }
    }
})

Answer 1

您需要为每个钱包创建一个表单

Answer 2

这是因为您的html name属性在ng-repeat

中具有相同的值

在名称字段中使用$ index来区分所有名称属性。

<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
  <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_{{$index}}" type="number" ng-model="wallet.value" type="text" required/>
      </label>
      <span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
    </div>            
    <div class="col item">{{ wallet.previous }}</div>
    <button ng-click="sendValue(wallet)">
      <i class="ion-android-send"></i>
    </button>
    <span class=ng-show="myForm.$submitted==true && myForm.wallet_{{$index}}.$error.required">Required</span>
  </div>
  <button class="button" type="submit">Submit</button> 
</form>

Answer 3

您必须再次在form内创建表单。但是根据HTML标准，您不能使用嵌套表单。但是角度提供了嵌套form的能力，但内部形式应该是ng-form。这意味着你要打包form＆amp;在里面你可以找到多个ng-form。

所以你应该ng-form="innerForm"跟踪每个重复的表格。

我观察到的另一件事是，你在使用ng-show时犯了错误（你在{{}}表达式中有ng-show，这是行不通的。要修复它，您可以通过其ng-show="innerForm['wallet_'+wallet.id].$error.required"

之类的键访问对象

<强>标记

<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
  <div ng-form="innerForm" 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="innerForm['wallet_'+wallet.id].$error.required">!!!</span>
    </div>            
    <div class="col item">{{ wallet.previous }}</div>
    <button ng-click="sendValue(wallet)">
      <i class="ion-android-send"></i>
    </button>
    <span class=ng-show="innerForm.$submitted==true && innerForm['wallet_'+wallet.id].$error.required">Required</span>
  </div>
  <button class="button" type="submit">Submit</button> 
</form>

仅对表单

3 个答案: