角指令与无法显示验证动态产生的输入字段 [英] Angular Directive with dynamically generated input fields not able to display validation

问题描述

在淘计算器和其他网站的3天，我发现自己回到了原点。

After 3 days of scouring stackoverflow and other sites, I have found myself back at square one.

我的任务：我需要验证动态生成的表单字段

My task: I need to validate dynamically generated form fields.

中的HTML：

 <form name="myForm">
    <form-field content="field" model="output[field.uniqueId]" ng-repeat="field in formFields"></form-field>
 </form>

控制器：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.formFields = [
    {
    "fieldName": "Your Name",
    "uniqueId": "your_name_0",
    "fieldType": "text",
    "isMandatory": true
    },
    {
    "fieldName": "Description",
    "uniqueId": "description_1",
    "fieldType": "textarea",
    "isMandatory": true,
    }
];

$scope.output={};
}

该指令：

myApp.directive("formField",function($compile){
var templates = {
    textTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label> <span ng-show="content.isMandatory" class="sub_reqText">*</span><span ng-show="form.content.fieldName.$invalid">Please check this field.</span><input type="text" ng-model="model" name="{{content.uniqueId}}" class="form-control" ng-required="content.isMandatory" id="{{content.uniqueId}}"/> </div><br>',
    textareaTemplate:'<div class="form-group"><label for="{{content.uniqueId}}" >{{content.fieldName}}</label> <span ng-show="content.isMandatory" class="sub_reqText">*</span> <span ng-show="form.content.fieldName.$invalid">Please check this field.</span> <textarea ng-model="model" name="{{content.uniqueId}}" id="{{content.uniqueId}}"  class="form-control" ng-required="content.isMandatory"></textarea> </div>' 
};

var getTemplate = function(content, attrs){
    var template = {};
    template = templates[content.fieldType+"Template"];
    if(typeof template != 'undefined' && template != null) {
            return template;
        }
        else {
            return '';
        }
};


var linker = function(scope, element, attrs){        
    element.html(getTemplate(scope.content, attrs)).show();        
    $compile(element.contents())(scope);
}

return {
    restrict:"E",        
    replace:true,        
    link:linker,
    scope:{
        content:'=',
        model:'=?'
    }
};
});

有很明显的一些范围的问题，因为我无法访问表单字段的指令之外，我无法访问指令里面的表单名称。我也知道$ scope.myForm.name属性不能角装订前pression，但我不知道如何重写它，这样它的作品。

There is clearly some scope issue because I cannot access the form fields outside of the directive and I cannot access the form name inside the directive. I also know $scope.myForm.name property cannot be an angular binding expression but I am not sure how to rewrite it so that it works.

这是的jsfiddle： http://jsfiddle.net/scheedalla/57tt04ch/

This is the jsfiddle: http://jsfiddle.net/scheedalla/57tt04ch/

任何指导，将是非常有用的，谢谢！

Any guidance will be very useful, thank you!

推荐答案

在调试我发现，name属性没有正确编译为形式的问题。它显示 {{} content.uniqueId} 的名字，但实际上它的UI呈现正确。

While debugging the problem I found that, the name attribute is not properly compiled for form. It was showing {{content.uniqueId}} in name but actually it rendered properly on UI.

例如。
对于下面的HTML。

Eg. For below html.

<input type="text" ng-model="model" name="{{content.uniqueId}}" class="form-control" 
ng-required="content.isMandatory" id="{{content.uniqueId}}"/>

呈现为名称name =your_name_0，但形式收集它显示 {{} content.uniqueId} 与插补指令。

name rendered as name="your_name_0" but in form collection it was showing {{content.uniqueId}} with the interpolation directive.

好像名称不正确interpoluted。

Seems like name is not interpoluted properly.

随后发现问题与AngularJS，你不能设置名称属性对于动态表单验证。

Then found issue with AngularJS, "You can't set name attribute dynamically for form validation."

注：上面提到的问题已被固定在1.3角（名
  属性正确插值）

Note: Above mentioned issue has been fixed in Angular 1.3.(name attributes interpolates properly)

＆安培;如果你想解决它们 NG-重复内，那么你应该总是使用嵌套的 NG-形式。 NG-重复里面的成员都会有自己的格式，并使用内部表格可以处理您的验证。 <一href=\"http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs\">Link仅供参考

& If you wanted to work them inside ng-repeat, then you should always use nested ng-form. Members inside ng-repeat will have their own form, and using that inner form you can handle your validation. Link For Reference

code修改

var templates = {
        textTemplate: '<ng-form name="form">'+
    '<div class="form-group">'+
        '<label for="{{content.uniqueId}}">{{content.fieldName}}</label> '+
          '<span ng-show="content.isMandatory" class="sub_reqText">*</span>'+
          '<span ng-show="form.input.$invalid">'+
          'Please check this field.'+
          '</span>'+
        '<input type="text" ng-model="model1" name="input" class="form-control" ng-required="content.isMandatory" id="{{content.uniqueId}}" /> '+
    '</div>'+
'</ng-form>'+
'<br>',
        textareaTemplate: '<ng-form name="form">'+
    '<div class="form-group">'+
        '<label for="{{content.uniqueId}}">{{content.fieldName}}</label>'+
          '<span ng-show="content.isMandatory" class="sub_reqText">*</span> '+
          '<span ng-show="form.textarea.$invalid">Please check this field.</span>'+
          '<textarea ng-model="model" name="textarea" id="{{content.uniqueId}}" class="form-control" ng-required="content.isMandatory"></textarea>'+
    '</div>'+
'</ng-form>'
    };

只有我改变了HTML模板，基本上都添加了＆LT; NG形式＆GT;＆LT; / NG形式＆GT; 模板和处理的基础上它的内在形式验证

Only i changed the template html, basically added <ng-form></ng-form> for templates and handled the validation on basis it in inner form.

下面是你的工作小提琴

希望这清除了你的理解。谢谢你。

Hope this have cleared your understanding. Thanks.

这篇关于角指令与无法显示验证动态产生的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！