2

3 日間、stackoverflow や他のサイトを精査した後、私は振り出しに戻りました。

私の仕事: 動的に生成されたフォーム フィールドを検証する必要があります。

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 プロパティを角度バインディング式にすることはできませんが、機能するように書き換える方法がわかりません。

これは jsfiddle です: http://jsfiddle.net/scheedalla/57tt04ch/

どんなガイダンスもとても役に立ちます、ありがとう！

4

1 に答える 1

2

問題をデバッグしているときに、名前属性がフォーム用に適切にコンパイルされていないことがわかりました。名前で表示{{content.uniqueId}}されていましたが、実際には UI で適切にレンダリングされました。

例えば。以下の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}}補間ディレクティブで表示されていました。

名前が適切に補間されていないようです。

その後、AngularJS で「フォーム検証のために name 属性を動的に設定することはできません」という問題が見つかりました。

注: 上記の問題は Angular 1.3 で修正されています (name 属性は適切に補間されます)。

& 内でそれらを操作したい場合ng-repeatは、常にネストされたを使用する必要がありますng-form。内部のメンバーにng-repeatは独自のフォームがあり、その内部フォームを使用して検証を処理できます。参考リンク

コードの変更

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 を変更し、基本的<ng-form></ng-form>にテンプレートに追加し、内部フォームに基づいて検証を処理しました。

これがあなたのワーキングフィドルです

これで理解が深まったことを願っています。ありがとう。

于 2015-01-26T08:47:15.397 に答える