在指令采用NG-重复导致不能正常工作表单验证 [英] Using ng-repeat in directive causing form validation not working properly

查看：171
本文介绍了在指令采用NG-重复导致不能正常工作表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在HTML中，

 ＆LT;表格名称=textformNOVALIDATE＆GT;
    ＆LT; CMS-电台名称=色要求=真正的选项=[{称号：红，值：'红'}，{标题：'橙'，值：'橙色'}，{标题： 绿色，值：'绿色'}]NG模型=色＆GT;＆LT; / CMS-广播GT;
＆LT; /表及GT;

在JS，

  angular.module（'cmsRadio'，[]）。指令（cmsRadio'，函数（）{
使用严格的;    返回{
        限制：'E'，
        范围： {
            名称：'@'，
            要求：'='，
            选项​​：=，
            bindedModel：= ngModel
        }，
        更换：真实，
        templateUrl：radio.html
    };
}）;

在radio.html 

 ＆LT; D​​IV CLASS =表单组NG型={{名}}NG-CLASS ={'有错误：{{名}} 。$无效和放大器;＆安培; {{名}} $脏}＆GT;
    ＆LT; D​​IV CLASS =单选NG重复='在可选项'＆GT;
           ＆LT;标签＆gt;＆LT;输入类型=电台NAME ={{名}}NG模型=bindedModelVALUE ={{item.value}}NG-所需=需要＆GT; {{ item.title}}＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
    ＆LT;跨度类=有错误NG秀='{{名称}} $脏放大器;＆安培; 。{{名称}} $无效'NG消息='{{名称}} $错误'＆GT;
            ＆LT; p =类控制标签NG-一封邮件='需要'方式＆gt; {}名称{}是必需的＆LT; / P＆GT;
    ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;

当我点击第一个单选按钮，它显示的错误如下。

如果我点击了三个单选按钮的错误仅消失了。如何prevent错误出现时，只有单选按钮中的一个被点击的不是三个？任何人都可以帮忙吗？

编辑：我的解决方案

在HTML中，

 ＆LT; CMS-无线电标签=颜色NAME =色要求=真正的选项=[{答案：[{标题：红色 ，价值：红色}，{'称号'：'橙'，'值'：'橙色'}，{'标题'：'绿'，'值'：'绿色'}]，selectedAnswer ：空}]ID =色级=＆GT;＆LT; / CMS-广播GT;

在JS，

  angular.module（'cmsRadio'，[]）。指令（cmsRadio'，函数（）{
    使用严格的;        返回{
            限制：'E'，
            范围： {
                名称：'@'，
                要求：'='，
                选项​​：=
            }，
            更换：真实，
            templateUrl：radio.html
        };
    }）;

在radio.html 

 ＆LT; D​​IV CLASS =表单组NG型={{名}}NG-CLASS ={'有错误：{{名}} 。$无效和放大器;＆安培; {{名}} $脏}＆GT;
        ＆LT; D​​IV NG重复=项中选择＆GT;
            ＆LT; D​​IV CLASS =单选NG重复=答案item.answers​​＆GT;
                  ＆LT;标签＆gt;＆LT;输入类型=电台NAME ={{名}}NG模型=item.selectedAnswerVALUE ={{answer.value}}NG-所需=需要＆GT; {{answer.title}}＆LT; /标签＆gt;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;跨度类=有错误NG秀='{{名称}} $脏放大器;＆安培; 。{{名称}} $无效'NG消息='{{名称}} $错误'＆GT;
                ＆LT; p =类控制标签NG-一封邮件='需要'方式＆gt; {}名称{}是必需的＆LT; / P＆GT;
        ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;


解决方案

我不会插在NG-展示和纳克级的指令字段名称。

而不是重复 scope.name 为表单和输入名称，试着给的形式固定名称（如单选列表），例如：

 ＆LT; D​​IV CLASS =表单组NG型=单选列表NG-CLASS ={'有错误：单选列表[名] $无效＆安培; ＆安培;单选列表[名] $脏}＆GT;
    ＆LT; D​​IV CLASS =单选NG重复='在可选项'＆GT;
           ＆LT;标签＆gt;＆LT;输入类型=电台NAME ={{名}}NG模型=bindedModelVALUE ={{item.value}}NG-所需=需要＆GT; {{ item.title}}＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
    ＆LT;跨度类=有错误NG秀='单选列表[名] $脏放大器;＆安培; 。单选列表[名] $无效'NG消息='单选列表[名] $错误'过夜。;
            ＆LT; p =类控制标签NG-一封邮件='需要'方式＆gt; {}名称{}是必需的＆LT; / P＆GT;
    ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;

更新

上面的答案是错误的。该问题已无关名称的插值。有人简单地认为NG重复是创建子范围和NG-模型没有一个'。在里面，因此每个孩子范围得到取得自己的副本 bindedmodel 。

如果指令使用了 controllerAs 选项，这将不会是一个问题。然而，这里的简单的解决方案，我们可以直接使用范围使用 $父如下，以弥补孩子范围：

 ＆LT; D​​IV CLASS =表单组NG-CLASS ={'有错误：{{名}} $无效和放大器;＆安培; {{名} } $脏}＆GT;
    ＆LT; D​​IV CLASS =单选NG重复='在可选项'＆GT;
           ＆LT;标签＆gt;＆LT;输入类型=电台NAME ={{名}}NG模型=$ parent.bindedModelVALUE ={{item.value}}NG-所需=要求和放大器; ＆安培;！bindedModel＆GT; {{item.title}}＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
    ＆LT;跨度类=有错误NG秀={{名}} $无效和放大器;＆安培; {{名}} $脏NG的消息='{{名}} $错误 ＆GT;
      ＆LT; p =类控制标签NG-一封邮件='需要'方式＆gt; {}名称{}是必需的＆LT; / P＆GT;
    ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;

plunkr

In html,

<form name="textform" novalidate>
    <cms-radio name="color" require="true" option="[{title:'Red', value:'red'},{title:'Orange', value:'orange'},{title:'Green', value:'green'}]" ng-model="color"></cms-radio>
</form>

In JS,

angular.module('cmsRadio',[]).directive('cmsRadio', function(){
'use strict';

    return {
        restrict: 'E',
        scope: {
            name:'@',
            require:'=',
            option:"=",
            bindedModel: "=ngModel"
        },
        replace:true,    
        templateUrl: 'radio.html'
    };
});

In radio.html

<div class="form-group" ng-form="{{name}}" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >
    <div class="radio" ng-repeat='item in option'>
           <label><input type="radio" name="{{name}}" ng-model="bindedModel" value="{{item.value}}" ng-required="require">{{item.title}}</label>
    </div>
    <span class="has-error" ng-show='{{name}}.$dirty && {{name}}.$invalid' ng-message='{{name}}.$error'>
            <p class="control-label" ng-messsage='require'>{{name}} is required.</p>
    </span>
</div>

When I click on the first radio button, it shows the error as follow.

The error disappeared only if I clicked on the three radio buttons. How to prevent the error appeared when only one of the radio button is clicked instead of three? Anyone could help?

EDIT: MY SOLUTION

In html,

<cms-radio label="Color" name="color" require="true" option="[{'answers':[{'title':'Red', 'value':'red'},{'title':'Orange', 'value':'orange'},{'title':'Green', 'value':'green'}],'selectedAnswer':null}]" id="color" class=""></cms-radio>

In JS,

 angular.module('cmsRadio',[]).directive('cmsRadio', function(){
    'use strict';

        return {
            restrict: 'E',
            scope: {
                name:'@',
                require:'=',
                option:"="
            },
            replace:true,    
            templateUrl: 'radio.html'
        };
    });

In radio.html

<div class="form-group" ng-form="{{name}}" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >
        <div ng-repeat="item in option">
            <div class="radio" ng-repeat="answer in item.answers">
                  <label><input type="radio" name="{{name}}" ng-model="item.selectedAnswer" value="{{answer.value}}" ng-required="require">{{answer.title}}</label>
            </div>
        </div>
        <span class="has-error" ng-show='{{name}}.$dirty && {{name}}.$invalid' ng-message='{{name}}.$error'>
                <p class="control-label" ng-messsage='require'>{{name}} is required.</p>
        </span>
</div>

解决方案

I would not be interpolating the field names in the ng-show and ng-class directives.

Rather than duplicating scope.name for both the form AND the input names, try giving the form a fixed name (e.g. 'radioList') e.g.:

<div class="form-group" ng-form="radioList" ng-class="{'has-error':radioList[name].$invalid && radioList[name].$dirty}" >
    <div class="radio" ng-repeat='item in option'>
           <label><input type="radio" name="{{name}}" ng-model="bindedModel" value="{{item.value}}" ng-required="require">{{item.title}}</label>
    </div>
    <span class="has-error" ng-show='radioList[name].$dirty && radioList[name].$invalid' ng-message='radioList[name].$error'>
            <p class="control-label" ng-messsage='require'>{{name}} is required.</p>
    </span>
</div>

UPDATE

The answer above was misguided. The issue had nothing to do with the interpolation of name. It was simply that the ng-repeat was creating a child scope and the ng-model did not have a '.' in it, and therefore each child scope was getting its own copy of bindedmodel.

If the directive used the controllerAs option this would not be a problem. However, the simplest solution here where we are using scope directly is to compensate for the child scope by using $parent as below:

<div class="form-group" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >
    <div class="radio" ng-repeat='item in option'>
           <label><input type="radio" name="{{name}}" ng-model="$parent.bindedModel" value="{{item.value}}" ng-required="require && !bindedModel">{{item.title}}</label>
    </div>
    <span class="has-error" ng-show="{{name}}.$invalid  && {{name}}.$dirty" ng-messages='{{name}}.$error'>
      <p class="control-label" ng-messsage='require'>{{name}} is required.</p>
    </span>
</div>

Updated plunkr

这篇关于在指令采用NG-重复导致不能正常工作表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆