Tôi gặp sự cố với xác thực biểu mẫu trong AngularJS và sử dụng ng-lặp lại các mục bên trong biểu mẫu.AngularJS ng-lặp lại và hình thức xác nhận
HTML:
<div ng-app>
<div ng-controller="EditController">
<form name="form" novalidate>Name:
<br/>
<input type="text" ng-model="model.name" required="" />
<hr />Products:
<br/>
<div ng-repeat="product in model.products">
<div>
<input type="text" ng-model="product.name" required="" />
<input type="text" ng-model="product.price" required="" /> <a href="javascript:void(0)" ng-click="remove($index)">Remove</a>
</div>
</div>
<hr />
<button ng-disabled="form.$invalid || !form.$dirty" ng-click="save()">save</button>
<div ng-show="form.$invalid && !form.$pristine">There are errors.</div>
<div ng-show="!form.$dirty && form.$pristine">No changed detected to be saved.</div>
<div>
<p>Dirty? {{form.$dirty}}</p>
<p>Invalid? {{form.$invalid}}</p>
<p>Pristine? {{form.$pristine}}</p>
</div>
</form>
</div>
</div>
JS:
function EditController($scope) {
$scope.model = {
name: "Phil",
products: [{
name: "Foo",
price: 12.99
}, {
name: "Bar",
price: 15.99
}, {
name: "FooBar",
price: 24.99
}]
};
$scope.remove = function(index){
$scope.model.products.splice(index, 1);
};
$scope.save = function() {
console.log("saved");
};
}
Fiddle:
Replicate:
Hủy bỏ 1 mục bằng cách nhấp rem ove, hình thức không trở nên bẩn vì vậy nút không cho phép.
Nếu bạn chỉnh sửa trường tên, biểu mẫu sau đó sẽ bị bẩn.
Bất kỳ ý tưởng nào về cách xóa mục khỏi mảng khiến biểu mẫu bị bẩn?
có lẽ nhận xét này sẽ giúp bạn: http://docs.angularjs.org/guide/ forms # comment-622004399 – akonsu