角度驗證僅適用於表單內的1個輸入字段

Question

我正在使用角度1.1.1和Ionic構建表單。

有許多「錢包」，用戶需要發送一個新的「價值」到每個錢包。我的表單驗證所有字段，當按下表單的「提交」按鈕時工作正常。

但是，我也有每個錢包旁邊的一個按鈕，僅向此錢包發送值（與所有錢包沒有不同的值）。當我按下它時，出現所有驗證錯誤，但是我只需要爲特定錢包顯示錯誤。

我的形式（的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

使用$ inde x在你的姓名字段中區分所有姓名屬性。

<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 &裏面，你可以找到多個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>