AngularJS 반복 및 양식 유효성 확인

Question

AngularJS에서 양식 유효성 검사에 문제가 있고 양식 내의 항목을 반복 사용하고 있습니다.

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

바이올린 :

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

복제 :

REM 수면을 클릭하여 한 항목을 제거 ove, 폼이 더러워 져서 버튼이 활성화되지 않습니다.

이름 필드를 편집하면 양식이 더러워집니다.

배열에서 항목을 제거하는 방법에 대한 아이디어는 양식이 더럽습니까?

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