字段集的 Angular 组验证答案

【问题标题】：Angular Group validation of fieldsets字段集的 Angular 组验证
【发布时间】：2015-11-17 03:07:18
【问题描述】：

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 的简化结构。我想做的是在字段集中的输入字段有效时显示图像。

【问题讨论】：

标签： javascript html angularjs forms validation

【解决方案1】：

您需要在每个字段集上使用ng-form='formX' 指令（因为您不能将一个表单标签放在另一个表单标签中）。然后在每个字段集中使用<img src='myimg.jpg' ng-show='!!formX.$errors.required' />

您可以创建指令来封装它。

  <form>
    <fieldset ng-form='form1'>  
        <legend>
            Part one
            <img src="/correct.png" ng-show="!!form1.$errors.required">
        </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 ng-form='form2'>
        <legend>
            Part two
            <img src="/correct.png" ng-show="!!form2.$errors.required">
        </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>

【讨论】：

【解决方案2】：

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

【讨论】：