AngularJS ng-repeat und Formularvalidierung

Question

Ich habe ein Problem mit der Formularvalidierung in AngularJS und mit einer ng-Wiederholung von Elementen innerhalb des Formulars.

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/

Replizieren:

entfernen 1 Artikel von rem klicken ove, Formular wird nicht schmutzig, so dass der Button nicht aktiviert wird.

Wenn Sie das Namensfeld bearbeiten, wird das Formular dann schmutzig.

Irgendwelche Ideen zum Entfernen eines Elements aus dem Array machen das Formular schmutzig?

Answer 1

Angular bietet eine $setDirty() Funktion nur für den Zweck, Sie hier zu erreichen versuchen. fügen Sie es einfach in Ihrem ng-click Attribut wie so

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

Ich habe deine Geige gegabelt und es haben Arbeits here

Answer 2

Hier ist eine Möglichkeit.

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