Question

我正在努力创建动态表单和结构，但无法找到解决方案。

详细信息：后端向我发送了服务对象（或json），我应该使用它来创建一个内部具有服务名称的动态结构，依此类推。该对象还包含用于创建连接到服务的表单的信息（查看附加的图像）。此外，当您选择服务（单击左方框按钮）时，表单应立即显示，但如果单击圆形按钮（仅当启用了相对服务左按钮时），您还应该能够以dinamycally方式更改它如果左侧按钮是deflag，则该服务的数据如果重新打开则应该删除该表单。

我希望有人可以帮助我

我找不到连接所有逻辑的方法

  var services = [ {
                    "id" : "001",
                    "name" : "Serv1",
                    "fields" : []
                }, {
                    "id" : "002",
                    "name" : "Serv2",
                    "fields" : []
                }, {
                    "id" : "003",
                    "name" : "Serv3",
                    "fields" : [ {
                        "type" : "text",
                        "name" : "operation",
                        "label" : "Operation",
                        "required" : false,
                        "data" : ""
                    }, {
                        "type" : "text",
                        "name" : "note",
                        "label" : "Note",
                        "required" : false,
                        "data" : ""
                    }, {
                        "type" : "select",
                        "name" : "profile",
                        "label" : "Profile",
                        "options" : [ {
                            "name" : "000 - None",
                            "value" : "000"
                        }, {
                            "name" : "001 - Profile 1",
                            "value" : "001"
                        }, {
                            "name" : "002 - Profile 2",
                            "value" : "002"
                        } ],
                        "required" : false,
                        "data" : ""
                    } ]
                }, {
                    "id" : "004",
                    "name" : "Serv4",
                    "fields" : [ {
                        "type" : "checkbox",
                        "name" : "develop",
                        "label" : "Develop possibility",
                        "required" : false,
                        "data" : false
                    }, {
                        "type" : "checkbox",
                        "name" : "acceptance",
                        "label" : "Accept",
                        "required" : false,
                        "data" : false
                    } ]
                } ];

dynamicForm.html

[<div ng-controller="??"  directive="???">
    <md-card class="row" style="margin-bottom:20px;margin-left:0px;position:relative;max-width:650px;">
        <md-toolbar class="md-toolbar-tools" style="background-color:rgb(138, 180, 213);margin-bottom:10px;">{{SERVICE Name}}</md-toolbar>
        <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()" layout="row" layout-wrap style="padding-left: 40px;">
            <div ng-repeat="field in fields" flex=33>    
                <ng-form name="form">


                    <!-- TEXT FIELDS -->
                    <div ng-if="field.type=='text'">
                        <md-input-container>
                            <label>{{field.label}}</label>
                            <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data"/>
                        </md-input-container>    
                    </div>


                    <!-- EMAIL FIELDS -->
                    <div ng-if="field.type=='email'">
                        <md-input-container>
                            <label>{{field.label}}</label>
                            <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" />
                            <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Inserire mail!</span>
                            <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.email'}}">Non &egrave; una mail valida</span>
                        </md-input-container>
                    </div>


                    <!-- PASSWORD FIELDS -->
                    <div ng-if="field.type=='password'">
                        <md-input-container>
                            <label>{{field.label}}</label>
                            <input type="{{ field.type }}" dynamic-name="field.name" data-ng-model="field.data" ng-minlength={{field.min}} ng-maxlength={{field.max}} />
                            <span data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
                            <span data-ng-show=" {{'!form.'+field.name+'.required && (form.'+field.name+'.$error.minlength || form.'+field.name+'.$error.maxlength)' }}">Passwords must be between 8 and 20 characters.</span>
                        </md-input-container>
                    </div>


                    <!-- SELECT FIELDS -->
                    <div ng-if="field.type=='select'">
                        <md-input-container>
                            <label>{{field.label}}</label>
                            <md-select dynamic-name="field.name" data-ng-model="field.data">
                                <md-option ng-repeat="option in field.options" ng-value="option.value">{{option.name}}</md-option>
                            </md-select> 
                        </md-input-container>
                    </div>      

                     <!-- DATE FIELDS -->
                    <div ng-if="field.type=='date'">
                        <md-input-container>
                            <label>{{field.label}}</label>
                            <md-datepicker dynamic-name="field.name" data-ng-model="field.data" md-min-date="field.min" md-max-date="field.max"></md-datepicker>
                        </md-input-container>
                    </div> 

                    <!-- RADIO FIELDS -->
                    <div ng-if="field.type=='radio'">
                        <label class="col-sm-2 control-label">{{field.label}}</label>
                        <div class="checkbox" ng-repeat="option in field.options" >
                            <label>                
                                <input type="radio" data-ng-model="field.data"  name="taskGroup"  id="{{option.name}}" value="{{option.id}}">{{option.name}}
                            </label>
                        </div>
                    </div>

                    <!-- CHECKBOX FIELDS -->
                    <div ng-if="field.type=='checkbox'">
                        <md-input-container>
                            <md-checkbox dynamic-name="field.name" data-ng-model="field.data" name="taskGroup" id="{{option.name}}" value="{{option.id}}">
                                {{field.label}}
                            </md-checkbox>
                        <md-input-container>
                   </div>
                </ng-form>
            </div>
        </form>
    </md-card>
</div>]

https://i.stack.imgur.com/3Xk2s.png

Answer 1

我认为 formly 可以提供您所需要的内容，请参阅他们的示例http://angular-formly.com/#/example/intro/introduction。因此，在您的示例中，您只需修改 fields 属性以匹配 formly 结构和格式

使用基于object \ json的angular指令创建动态内容和表单

1 个答案: