AngularJS：在 AngularJS 中动态生成表单答案

【问题标题】：AngularJS: Generate a form dynamically in AngularJSAngularJS：在 AngularJS 中动态生成表单
【发布时间】：2023-03-30 08:45:01
【问题描述】：

我正在尝试生成 HTML 表单。

我有一个包含表单元素数组的对象，例如

{
    "formFields": [
        {
            "type": "select",
            "label": "Fabric",
            "name": "fabric",
            "options": [
                "Georgette",
                "Crepe",
                "Net",
                "Lace"
            ]
        },
        {
            "type": "text",
            "label": "Weight",
            "name": "weight",
            "options": []
        }
    ]
}

我想生成一个具有与上述对象一致的字段的表单，即它应该生成一个带有下拉选项“Georgette”、“Crepe”、“Net”、“Lace”的 Select 标签 Fabric 和一个输入元素输入带有重量标签的文本。

在 AngularJS 中最好的方法是什么？

【问题讨论】：

你试过角形式吗？它是一个角度模块，它做类似的事情.. github.com/formly-js/angular-formly
没有尝试过角度形式。现在正在经历。谢谢。

标签： javascript angularjs html

【解决方案1】：

我会创建一个指令，它接受一个表单字段对象作为输入，$compiles 是一个基于输入的模板。

HTML：

<div my-input="settings"></div>

Js：

angular.module('myApp').directive('myInput', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        require: 'ngModel',
        link: linkFn,
        scope: {
            config: '=myInput'
        }
    };

    function linkFn($scope, $element, $attrs, ngModelCtrl) {
        init();

        function init() {
            $scope.model = {};
            var template = getTemplate();

            template.attr('ng-model', 'model.value');

            $compile(template)($scope, function(clonedElem) {
                $element.html(clonedElem);
            });
        }

        function getTemplate() {
            switch($scope.config.type) {
                case 'text':
                    return '<input type="text"/>';
                case 'select':
                    return '<input type="select" ng-options="option in config.options">';
            }
        }
    }
}]);

这是我的想法，所以代码可能是错误的，但你明白了。

【讨论】：

【解决方案2】：

您可以参考示例here。请在下面找到代码：

HTML：

<div ng-app="app" ng-controller="test">
    <form name="myForm" ng-submit="validateForm(myForm.$valid)">
        <div ng-repeat="item in formData.formFields">
            <div ng-if="item.type == 'text'">
                <label>{{item.label}}: </label>
                <input type="{{item.type}}" name="{{item.name}}">
            </div>
            <div ng-if="item.type == 'select'">
                <label>{{item.label}}: </label>
                <select name="{{item.name}}">
                    <option ng-repeat="opt in item.options" value="{{opt}}">{{opt}}</option>
                </select>
            </div>
            <br>
        </div>
    </form>
</div>

JS：

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

app.controller('test', function ($scope) {
    $scope.formData = {
        "formFields": [
            {
                "type": "select",
                "label": "Fabric",
                "name": "fabric",
                "options": [
                    "Georgette",
                    "Crepe",
                    "Net",
                    "Lace"
                ]
            },
            {
                "type": "text",
                "label": "Weight",
                "name": "weight",
                "options": []
            }
        ]
    };

$scope.validateForm = function(isValid){
 /*..*/
}
});

【讨论】：