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

我创建了这个简单的示例：

如果在AngularJS 1.2.1和1.1.1之间切换，您将看到单选按钮在这两个版本中都不能正常工作。如果查看单选按钮的

$dirty

字段，1）对于版本1.1.1，仅在单击第一个按钮时设置；2）对于版本1.2.1，仅在单击最后一个按钮时设置

我读了这个答案：但我真的不明白答案。不仅如此，fiddler示例还演示了相同的行为

---

那么，这是AngularJS中的一个bug吗？我如何解决它呢？

您需要为每个单选按钮输入不同的名称，或者需要将每个单选按钮包装成ng表单（每个单选按钮都有不同的名称）。如果在同一表单中使用两个名称相同的输入，则只有最后一个输入将绑定到FormController上的属性。如果使用不同的名称，则每个输入在FormController上都有自己的属性

每个单选按钮具有不同名称的示例：

拒绝

已批准

表单$dirty:{{Form.$dirty}}

Field1$dirty:{{form.myRadio1.$dirty}}

Field1$dirty:{{form.myRadio2.$dirty}}

值：{{myRadio}}

使用ng表单包装的示例：

拒绝

已批准

表单$dirty:{{Form.$dirty}}

Field1$dirty:{{form.form1.myRadio.$dirty}}

Field2$dirty:{{form.form2.myRadio.$dirty}}

值：{{myRadio}}

如果您想对单选组进行一次检查，可以将所有单选按钮包装成自己的ng形式，并将其命名为name=“radioGroup”

拒绝

已批准

表单$dirty:{{Form.$dirty}}

组$valid:{form.radioGroup.$valid}}

组$dirty:{{form.radioGroup.$dirty}}

值：{{myRadio}}

这个答案是相关的，但可能并不完全适用，但在找到并阅读了这篇文章后，我觉得提供它很有价值，我没有足够的理由对答案发表评论（我认为这是一种更合适的回应方式）

我的问题是，我想显示一个必需的错误（使用ng消息），但是当您通过/通过单选按钮组时，$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使用类似的策略。

这将起作用。我很惊讶两个控件的

$valid

变为

true

，即使只选择了一个控件。我猜这是因为它们使用相同的ng模型，所以所有输入都可以判断组中是否选择了一个。问题是每个控件现在也有自己的

$dirty

。我只喜欢在控件标记为“

$dirty

”时显示验证。您可以在所有单选按钮周围包装一个ng表单，并将其称为“radioGroup”，然后在单击任何单选按钮时，它将被标记为$dirty。我再加一把小提琴。我最后选择了选项3。我使用了一个验证指令，该指令将用

包围控件，并添加一个描述错误的

。遗憾的是，它不起作用，因为有两个控件同名，并且它只在

ngModel

上起作用，而不是

表单

。我只是复制了逻辑，使它与外部表单一起工作，现在一切都正常了。在一个地方总结所有不同的方法也是一件好事。我觉得“如果在同一个表单中使用两个名称相同的输入，那么只有最后一个将绑定到表单上的属性”。Html要求来自同一组的收音机具有相同的名称。然而，它会做这个奇怪的事情在角度。。。angular可能需要重新审视它是如何处理收音机/复选框的，因此，如果想要使用

$touch

属性，这是行不通的。实际引入与材料设计类似的不同/自定义指令可能有意义

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

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

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