javascript - 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>

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/

複製:

削除をクリックして 1 アイテムを削除します。フォームが汚れていないため、ボタンは有効になりません。

名前フィールドを編集すると、フォームが汚れます。

配列からアイテムを削除してフォームを汚す方法についてのアイデアはありますか?

Answer 1

Angular は、$setDirty()ここで達成しようとしている目的のための関数を提供します。ng-clickそのように属性に追加するだけです

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

私はあなたのフィドルをフォークし、ここで動作させました

Answer 2

これが1つの方法です。

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