Question

我正在使用Angular 1.3.5并且有一个包含两个单选按钮的无线电组。它们共享相同的age模型。我希望该组是必需的，如果用户没有选择其中一个，则显示错误。一个要求是默认情况下必须取消选中这两个选项，因此我无法预先选择一个选项。

我正在使用ng-required="!age"技巧进行验证，但似乎永远不会触发contestForm.age.$error.required错误状态。 form__errors UL显示在contestForm.$submitted上，但不显示所需错误的实际LI。

玉

li.form__field-group
    .form__field
        input#contest-age-of-majority(type='radio', value='ageOfMajority', ng-model='age', ng-required='!age')
    .form__field
        input#contest-parental-consent(type='radio', value='parentalConsent', ng-model='age', ng-required='!age')

    ul.form__errors(ng-show='contestForm.$submitted || contestForm.age.$touched')
        li.form__error(ng-show='contestForm.age.$error.required', translate='error.required')

这是一个羽毛http://plnkr.co/edit/EsLHmbEtMjDN38DDwHQU?p=preview

Answer 1

我意识到形式和ng模型是独立的实体;名为age的模型并不意味着表单将具有相同名称的字段。相反，表单依赖于字段的name属性。我没有给收音机起一个名字，因为有几个例子因为这个模型而变得不必要了。

我检查了生成的源代码，Angular会自动为任何带有name="108"和name="110"等数字的未命名字段命名。它们将显示在表单对象上的这些键下，而不是age字段。

现在看来显而易见，但解决方案是为两个单选按钮提供name="age"属性。现在验证工作，如果在未选择任何选项的情况下提交表单，则会显示所需的错误。

li.form__field-group
    .form__field
        input#contest-age-of-majority(type='radio', name='age', value='ageOfMajority', ng-model='age', ng-required='!age')
    .form__field
        input#contest-parental-consent(type='radio', name='age', value='parentalConsent', ng-model='age', ng-required='!age')

    ul.form__errors(ng-show='contestForm.$submitted || contestForm.age.$touched')
        li.form__error(ng-show='contestForm.age.$error.required', translate='error.required')

为什么我的广播组不会根据需要进行验证

1 个答案: