angularjs: ngModelController is not found in FormController

Question

I have 2 directives, one is my-form, one is my-field.
Everything works well except I can not get the ngModelController of the input fields.
So I can not get the $dirty, $valid properties of these fields.
For example, when submitting, I want to get the ngModelController of the input with name "field1", but I can not get it.
form.field1 is undefined.
In the FormController "form1", there is no field, any one can help on this?
Many thanks

the code in fiddle is as below:
https://jsfiddle.net/luneyq/0td5hLur/2/

main codes are also listed below:

        angular.module('myApp', [])
                .controller('MyController', ['$scope', function ($scope) {
                    $scope.config = {
                        name: 'form1',
                        fields: [
                            {type: 'text', name: 'field1', model: 'obj.field1'},
                            {type: 'text', name: 'field2', model: 'obj.field2'}
                        ]
                    };
                }])
                .directive('myForm', function() {
                    return {
                        restrict: 'E',
                        replace: true,
                        template: '' +
                            '<form name="{{config.name}}">' +
                            '   <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
                            '    <button ng-click="submit()">submit</button>' +
                            '</form>',
                        scope: {
                            config: '='
                        },
                        link: function(scope, el, attr) {
                            scope.obj = {};
                            scope.submit = function() {
                                var form = scope[scope.config.name];
                                alert(form.field1);
                                alert(form.field1.$dirty);        // error here
                            }
                        }
                    }
                })
                .directive('myField', ['$compile', function($compile) {
                    return {
                        restrict: 'E',
                        replace: true,
                        link: function(scope, iElement, iAttrs) {
                            scope.config = scope.$eval(iAttrs.config);
                            var config = scope.config;
                            var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
                            iElement.after($compile(html)(scope));
                            iElement.remove();
                        }
                    }
                }])
        ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
    <my-form config="config"></my-form>
</div>

Raphael Torres · Answer 1 · 2016-04-27T02:59:18.583

Try this:

    angular.module('myApp', [])
            .controller('MyController', ['$scope', function ($scope) {
                $scope.config = {
                    name: 'form1',
                    fields: [
                        {type: 'text', name: 'field1', model: ''},
                        {type: 'text', name: 'field2', model: ''}
                    ]
                };
            }])
            .directive('myForm', function() {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '' +
                        '<form name="{{config.name}}">' +
                        '   <my-field ng-repeat="item in config.fields" field="item"></my-field>' +
                        '    <button ng-click="submit()">submit</button>' +
                        '</form>',
                    scope: {
                        config: '='
                    },
                    link: function(scope, el, attr) {
                        scope.submit = function() {
                                var form = scope[scope.config.name];
                                angular.forEach(scope.config.fields, function(item){
                                    console.log(item.name + ": " + form[item.name].$dirty);
                            });                                
                        }
                    }
                }
            })
            .directive('myField', function() {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '' +
                        '<input type="{{field.type}}" ng-model="field.model" name=" {{field.name}}" />',
                    scope: {
                        field: '='
                    }                        
                }
            })
    ;

yes, your code works, but could you explain why my code failed? Actually, my code is only a simplified version of real one, I need to use the mode of parsing string, because there are kinds of different types of fields in real world. — Lune, Apr 27 '16 at 05:01
meanwhile, in your code, the ng-model of every field is the same. — Lune, Apr 27 '16 at 05:33

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

I tried it out myself, only modified several lines but it was really not a easy job.
Please kindly refer to another post:

angularjs custom form and field directive: ngModelController is not found in FormController enter link description here

edited May 23 '17 at 10:28

Community

1
1

answered May 10 '16 at 05:22

Lune

241
1
3
13

angularjs: ngModelController is not found in FormController

2 Answers2