直到选中最后一个按钮，AngularJS单选按钮才标记为$ dirty [英] AngularJS radio buttons not marked $dirty until last button selected

问题描述

我创建了一个简单的示例: http://jsfiddle.net/5Bh59/.

I created this simple example: http://jsfiddle.net/5Bh59/.

如果您在AngularJS 1.2.1和1.1.1之间切换，则会看到单选按钮在这两个版本中均无法正常工作.如果您观看单选按钮的$dirty字段，则1)对于版本1.1.1，仅在单击第一个按钮时设置，而2)对于版本1.2.1，则仅在单击最后一个按钮时设置.点击.

If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.

我阅读了以下答案: AngularJS Radio组未将$ dirty设置为字段，但我不太明白答案.不仅如此，小提琴手的示例也表现出相同的行为.

I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.

那么，这是AngularJS中的bug，我该如何解决?

So, is this a bug in AngularJS and how can I work around it?

推荐答案

您要么需要为每个单选按钮输入一个不同的名称，要么需要将每个单选按钮包装为ng格式(每个单选按钮都有不同的名称)姓名).如果以相同的形式使用两个具有相同名称的输入，则只有最后一个将绑定到FormController的属性上.如果使用不同的名称，则每个输入在FormController上将具有其自己的属性.

You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.

每个单选按钮使用不同名称的示例: http://jsfiddle.net/BEU3V/

Example with different names for each radio button: http://jsfiddle.net/BEU3V/

<form name="form" novalidate>
    <input type="radio" 
        name="myRadio1" 
        ng-model="myRadio" 
        ng-click="" 
        value="Rejected"
        required>Rejected<br />
    <input type="radio" 
        name="myRadio2" 
        ng-model="myRadio"
        ng-click=""
        value="Approved"
        required>Approved<br />
   Form $dirty: {{form.$dirty}}<br />
   Field1 $dirty: {{form.myRadio1.$dirty}}<br />
   Field1 $dirty: {{form.myRadio2.$dirty}}<br />
   Value: {{myRadio}}
</form>

使用ng-form包装的示例: http://jsfiddle.net/39Rrm/1/

Example wrapping with ng-form: http://jsfiddle.net/39Rrm/1/

<form name="form" novalidate>
    <ng-form name="form1">
    <input type="radio" 
        name="myRadio" 
        ng-model="myRadio" 
        ng-click="" 
        value="Rejected"
        required>Rejected<br />
        </ng-form>
    <ng-form name="form2">    
    <input type="radio" 
        name="myRadio" 
        ng-model="myRadio"
        ng-click=""
        value="Approved"
        required>Approved<br />
        </ng-form>
   Form $dirty: {{form.$dirty}}<br />
   Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
   Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
   Value: {{myRadio}}
   </form>

如果您希望对单选组进行一次检查，则可以将所有单选按钮包装在其自己的ng-form中，并命名为name ="radioGroup".

If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".

http://jsfiddle.net/6VVBL/

<form name="form" novalidate>
    <ng-form name="radioGroup">
    <input type="radio" 
        name="myRadio1" 
        ng-model="myRadio" 
        ng-click="" 
        value="Rejected"
        required>Rejected<br />
    <input type="radio" 
        name="myRadio2" 
        ng-model="myRadio"
        ng-click=""
        value="Approved"
        required>Approved<br />
        </ng-form>
   Form $dirty: {{form.$dirty}}<br />
   Group $valid: {{form.radioGroup.$valid}}<br />
   Group $dirty: {{form.radioGroup.$dirty}}<br />
   Value: {{myRadio}}
   </form>

这篇关于直到选中最后一个按钮，AngularJS单选按钮才标记为$ dirty的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！