Question

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

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

我读到了这个答案：AngularJS Radio group not setting $dirty on field但我真的不明白答案。不仅如此，而且小提琴示例也表现出同样的行为。

那么，这是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>

Answer 2

这个答案是相关的，但可能并不完全适用，但在找到并阅读这个项目后，我觉得提供它很有价值，而且我没有足够的观点来评论一个答案（我认为会更多适当的回应方式）。

我的问题是我想显示一个必需的错误（使用ng-messages）但是当你选中/通过单选按钮组$ touch没有转为true，除非你从下一个UI元素切换回来到该组的最后一个单选按钮。（当我的表单呈现单选按钮未设置时 - 我希望用户进行选择而不是依赖用户接受默认值。）

这是我的代码：

<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
    <label class="control-label">
        What is your pet's gender?
        <span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
            <span ng-message="required">(required)</span>
        </span>
    </label>
    <div>
        <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
        <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
        <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
    </div>
</div>

'魔术'正在添加ng-blur属性来设置'触摸'我自己，即使只有第一个单选按钮被标记过去。

你可以通过在ng-changed属性中调用$ setDirty（）来为$ dirty使用类似的策略。

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

2 个答案: