在选择最后一个按钮之前,AngularJS单选按钮未标记为$ dirty

Question

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

如果在AngularJS 1.2.1和1.1.1之间切换,您会看到单选按钮在任一版本中都无法正常工作.如果你看单选按钮的$dirty字段,1)对于版本1.1.1,它只会在单击第一个按钮时设置,2)对于版本1.2.1,它只会在单击最后一个按钮时设置.

我读到了这个答案:AngularJS Radio组没有在字段上设置$ dirty,但我真的不明白答案.不仅如此,而且小提琴示例也表现出相同的行为.

那么,这是AngularJS中的一个错误,我该如何解决它？

Answer 1

您需要为每个单选按钮输入一个不同的名称,或者您需要将每个单选按钮换行为ng-form(每个单选按钮都有不同的名称).如果在同一表单中使用两个具有相同名称的输入,则只有最后一个输入将绑定到FormController上的属性.如果使用不同的名称,则每个输入在FormController上都有自己的属性.

每个单选按钮具有不同名称的示例: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/

<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".

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>