javascript - 字段集的 Angular Group 验证

Question

AngularJS 验证适用于 ng-required，但我想看看我的字段集中的所有表单元素是否都有效。

<form>
    <fieldset>  
        <legend>
            Part one
            <img src="/correct.png" ng-show="part_one_valid">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>

    <fieldset>
        <legend>
            Part two
            <img src="/correct.png" ng-show="part_two_valid">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>
</form>

这就是简化后的 HTML 结构。 我想做的是在字段集中的输入字段有效时显示图像。

Answer 1

利用 ng-form 指令，多个表单可以使用它相互嵌套。我建议你使用 ng-form 指令来使 fieldset 像一个表单一样工作并给它一些特定的 name ，以在您需要在表单和表单元素上使用 name 属性的表单字段上启用表单验证。

标记

<form name="myForm">
    <fieldset ng-form="part_one">  
        <legend>
            Part one
            <img src="/correct.png" ng-show="part_one.$valid">
        </legend>
        <input type="text" name="name" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" name="foobar" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>

    <fieldset ng-form="part_two">
        <legend>
            Part two
            <img src="/correct.png" ng-show="part_two.$valid">
        </legend>
        <input name="name" type="text" ng-required=1 ng-model="name" placeholder="name">
        <input name="foobar" type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>
</form>