AngularJS ng-repeat और फॉर्म सत्यापन

Question

मुझे AngularJS में फॉर्म सत्यापन के साथ कोई समस्या है और फ़ॉर्म के अंदर वस्तुओं का एक ng-repeat का उपयोग कर रहा है।

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> 

जे एस:

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"); 
    }; 
} 

फिडल:

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

प्रतिकृति

रेम क्लिक करके 1 आइटम निकालें ओवे, फॉर्म गंदा नहीं होता है इसलिए बटन सक्षम नहीं होता है।

यदि आप नाम फ़ील्ड संपादित करते हैं, तो फॉर्म गंदा हो जाता है।

सरणी से किसी आइटम को हटाने के तरीके पर कोई विचार फ़ॉर्म को गंदा बना देता है?

Answer 1

कोणीय सिर्फ उद्देश्य तुम यहाँ पूरा करने के लिए कोशिश कर रहे हैं के लिए एक $setDirty() समारोह प्रदान करता है। सीधे शब्दों में यह इतना

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

की तरह अपने ng-click विशेषता में इसे जोड़ने मैं अपने बेला काँटेदार है और यह here

Answer 2

यहां एक तरीका है।

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