Question

在我目前的项目中，我需要使用AngularJS创建动态表单。我已按照此视频here.

中的想法制作表单

我似乎无法将提交的数据提交给我的控制器。我只在控制台日志中收到undefined。

目前，在加载状态之前，在ui-router中解析表单的数据，然后将其复制到控制器的数据属性中。

与视频不同，我们的表单要求将问题细分为几个部分。

数据中的每个部分都有一个ng-repeat，然后嵌套的ng-repeat遍历每个问题。确定类型，并通过ng-switch加载问题/字段类型的正确指令。

我掀起了一个小型的Plunker来帮助说明。 https://plnkr.co/edit/6dCnHiFDEYu03kfX07mr

最后有些类型我不确定如何处理，例如地址或电话号码，它们将被视为一种问题类型，但有多个字段。

（例如[街道] [城市] [州] [邮编]）

控制器

namespace portal.dashboard.form{
class formCtrl{
    formData: portal.domain.interfaces.IHousingRequest;

    static $inject = ["formResolve"];
    constructor(private formResolve:any) {

        this.formData= this.loadHousingRequestFormData;
    }

    public submit(isValid,data) {
        if (isValid) {
            console.log(data);
        }
    }
}
angular
    .module("portal")
    .controller("formCtrl", formCtrl);
}

输入类型文本的指令

namespace portal.directives {
function inputText(): ng.IDirective {
    return {
        scope: {
            model: '='
        },
        controller: function ($scope: ng.IScope) {
            var directiveScope = $scope.$parent.$parent;
        },
        controllerAs:'vm',
        templateUrl: 'form/templates/input-text.html'            
    }
}

angular
    .module("portal")
    .directive("inputText", inputText);
}

输入类型html

<input type="text"
       ng-model="model"/>

HTML

    <form name="form" ng-submit="vm.submit(form.$valid, data)" novalidate>

    <!-- Section repeat -->
    <div ng-repeat="section in vm.formData.sections track by $index">
        <section>
            <div>
                <h4>
                    {{section.name}}<br />
                    <small ng-show="section.description">{{section.description}}</small>
                </h4>
            </div>
            <section>

                <!-- Section questions repeat -->
                <div ng-form="formFields" ng-repeat="field in section.fields track by $index">
                    <label>
                        {{field.name}}<br />
                        <small>{{field.description}}</small>
                    </label>

                    <!-- input field switch -->
                    <div ng-switch="field.type">
                        <div ng-switch-when="Text">
                            <input-text model="data.answer[$index]">
                            </input-text>
                        </div>
                        <div ng-switch-when="Email">
                            <input-email model="data.answer[$index]">
                            </input-email>
                        </div>
                    </div>
                </div>

            </section>
        </section>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

Answer 1

您必须在使用之前初始化$scope.data = {};，并使用正确的sectionIndex和fieldIndex来填充答案：

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.sections = [{
    name: 'User Info',
    description: 'I\'m a description.',
    fields: [{
      label: "Name",
      type: "text"
    }, {
      label: "Email",
      type: "email"
    }]
  }, {
    name: 'Pet Info',
    description: '',
    fields: [{
      label: "Pet Breed",
      type: "text"
    }]
  }];

  $scope.submit = function(isValid, data) {
    console.log('submit fired');
    if (isValid) {
      console.log(data);
    }
  }
});


app.directive('inputText', function() {
  return {
    scope: {
      model: '='
    },
    controller: function($scope) {
      var directiveScope = $scope.$parent.$parent;
    },
    controllerAs: 'vm',
    template: '<input type="text" ng-model="model"/>'
  }

});

app.directive('inputEmail', function() {
  return {
    scope: {
      model: '='
    },
    controller: function($scope) {
      var directiveScope = $scope.$parent.$parent;
    },
    controllerAs: 'vm',
    template: '<input type="email" ng-model="model"/>'
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
    <form name="form" ng-submit="submit(form.$valid, data)" novalidate>

    <!-- Section repeat -->
    <div ng-repeat="(sectionIndex, section) in sections track by $index">
        <section>
            <div>
                <h4>
                    {{section.name}}<br />
                    <small ng-show="section.description">{{section.description}}</small>
                </h4>
            </div>
            <section>

                <!-- Section questions repeat -->
                <div ng-form="formFields" ng-repeat="(fieldIndex, field) in section.fields track by $index">
                    <label>
                        {{field.label}}<br />
                    </label>

                    <!-- input field switch -->
                    <div ng-switch="field.type">
                        <div ng-switch-when="text">
                            <input-text model="data.answer[sectionIndex][fieldIndex]">
                            </input-text>
                        </div>
                        <div ng-switch-when="email">
                            <input-email model="data.answer[sectionIndex][fieldIndex]">
                            </input-email>
                        </div>
                    </div>
                </div>

            </section>
        </section>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>
  </body>

＆＃13;

此外，我不确定为什么你需要在你的指令控制器中使用var directiveScope = $scope.$parent.$parent;，你真的需要这个吗？

angularjs具有不同字段类型的动态表单

1 个答案: