AngularJS ng-lặp lại và hình thức xác nhận

Question

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.

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:

http://jsfiddle.net/66V6m/2/

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?

Answer 1

Góc cung cấp chức năng $setDirty() cho mục đích bạn đang cố gắng thực hiện ở đây. Đơn giản chỉ cần thêm nó nó trong thuộc tính ng-click của bạn như vậy

<input type="text" ng-model="product.price" required="" /> 
<a href="javascript:void(0)" ng-click="remove($index); form.$setDirty(true);">Remove</a> 

Tôi đã chia hai fiddle của bạn và có nó làm việc here

Answer 2

Đây là một cách.

$scope.remove = function (index) { 
    $scope.model.products.splice(index, 1); 
    $scope.form.$dirty = true; 
};