0
私のコードスニペットをご覧ください。スプライシングでフォームエラーが削除されました。ng-repeat配列アイテム
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<ng-form name="phoneInnerForm">
<div>
<div class="form-group" data-ng-repeat="item in items" ng-class="phoneInnerForm.phones{{$index}}.$error.maxlength ? 'phone_number_error': ''">
<input type="text" class="form-control" id="InputAddPhone" name="phones{{$index}}" ng-model="item.number" ng-maxlength="50">
<select class="form-control" ng-model="item.type">
<option value=""></option>
<option value="mobile">Mobile</option>
<option value="work">Work</option>
<option value="home">Home</option>
<option value="fax">Fax</option>
<option value="other">Other</option>
</select>
<div class="evy_email_dltbtn">
<button type="button" class="btn btn-default btn_delete" ng-click="deleteItem($index);" title="Delete">Delete</button>
<button ng-show="$last" type="button" class="btn btn-default btn_delete" ng-click="addItem();" title="Delete">Add</button>
</div>
<span ng-show="phoneInnerForm.phones{{$index}}.$error.maxlength" class="evy_user-preference_error">Phone number should not exceed 50 characters</span>
</div>
</div>
</ng-form>
<script>
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
$scope.items = [{
number: "",
type: ""
}];
$scope.addItem = function() {
$scope.items.push({
number: "",
type: ""
});
}
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
}
]);
</script>
</body>
</html>50よりも大きい長さを有する3-4電話番号を追加してみてください[削除ボタンを使用して第1 PHONENUMBERを削除してみてください。 私の問題は、最後の電話番号の検証が削除されています。 私を助けてください。
おかげ？ –
はい、同じ名前ですが、各フォームは異なるものとして扱われます。 $ scope.itemsを使用して、各フィールドから値を取得できます。 ngFormは、要件のような入れ子の目的に使用するように設計されています。 –
これは私のために働いています。これをupvoteしてください。 –