Question

我正在尝试使用Angular的$ dirty标志仅提交表单中已更改的字段。

当我遇到单选按钮组时，我错过了更改字段列表中的更改。我有一个fiddle来重现我所看到的问题。

<div ng-app="form-example" ng-controller="MainCtrl">
    <form name="form" novalidate>
        <input type="radio" name="myRadio" ng-model="myRadio" value="one" required>One<br />
        <input type="radio" name="myRadio" ng-model="myRadio" value="two" required>Two<br />
        <input type="radio" name="myRadio" ng-model="myRadio" value="three" required>Three<br />
        <input type="radio" name="myRadio" ng-model="myRadio" value="four" required>Four<br />
        <input type="radio" name="myRadio" ng-model="myRadio" value="five" required>Five<br /><br />
       Form $dirty: {{form.$dirty}}<br />
       Field $dirty: {{form.myRadio.$dirty}}<br />
       Value: {{myRadio}}
    </form>
</div>

字段的$ dirty标志只会在单击最后一个单选按钮时更改，即使表单$ dirty正确更新。

我错过了一些基本的东西吗？并且有针对此行为的解决方法吗？

Answer 1

每个ng-model实际上都会实例化一个控制器。当您单击任何单选按钮时，控制器会将$dirty字段设置为true并将form.$dirty设置为true。

问题是form.myRadio保留对最后一个单选按钮模型的引用。

作为一种解决方法，您可以将嵌套表单与ng-form一起使用。见这里：http://jsfiddle.net/UM578/

Answer 2

我给每个无线电输入一个唯一的名字。也许你可以更广泛地了解你想要做的事情。

<div ng-app="form-example" ng-controller="MainCtrl">
<form name="form" novalidate>
    <input type="radio" name="myRadio1" ng-model="myRadio" value="one" required>One<br />
    <input type="radio" name="myRadio2" ng-model="myRadio" value="two" required>Two<br />
    <input type="radio" name="myRadio3" ng-model="myRadio" value="three" required>Three<br />
    <input type="radio" name="myRadio4" ng-model="myRadio" value="four" required>Four<br />
    <input type="radio" name="myRadio5" ng-model="myRadio" value="five" required>Five<br /><br />
   Form $dirty: {{form.$dirty}}<br />
   Field 1 $dirty: {{form.myRadio1.$dirty}}<br />
   Field 2 $dirty: {{form.myRadio2.$dirty}}<br />
   Field 3 $dirty: {{form.myRadio3.$dirty}}<br />
   Field 4 $dirty: {{form.myRadio4.$dirty}}<br />
   Field 5 $dirty: {{form.myRadio5.$dirty}}<br />
   Value: {{myRadio}}
</form>

AngularJS Radio组未在字段上设置$ dirty

2 个答案: