AngularJS ng-powtórzenie i sprawdzanie poprawności formularza

Question

Mam problem z weryfikacją formularza w AngularJS i korzystaniem z powtarzania ng elementów wewnątrz formularza.

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/

Replikacja:

Usunąć 1 pozycję klikając rem ove, forma nie ulega zabrudzeniu, więc przycisk nie włącza się.

W przypadku edycji pola nazwy formularz staje się brudny.

Wszelkie pomysły dotyczące usuwania elementu z tablicy powodują, że formularz jest brudny?

Answer 1

Angular zapewnia funkcję $setDirty() dla celów, które chcesz osiągnąć tutaj. Wystarczy dodać go w atrybucie ng-click jak tak

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

Mam rozwidlone swoje skrzypce i zlecić pracę here

Answer 2

Oto jeden sposób.

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