从JSON - AngularJS1.x生成动态条件表单字段

I am working on a AngularJS1.x application where I have to generate dynamic form fields based on some conditions. The entire dynamic form field type, field validations, conditions are coming from a JSON. The field type can be textboxes, select boxes, date-pickers, radio buttons or check boxes.

我在做一个天使1。x应用程序，我必须基于某些条件生成动态表单字段。整个动态表单字段类型、字段验证、条件都来自JSON。字段类型可以是文本框、选择框、日期选择器、单选按钮或复选框。

Trying to Accomplish: I am trying to work on a simpler process to generate the form fields based on the conditions.

尝试完成:我正在尝试使用一个更简单的过程来基于条件生成表单字段。

For each field type there are 3 conditions,

每个字段类型有3个条件，

is_mandatory
is_mandatory
is_editable
is_editable
is_display
is_display

Their values can be,

他们的价值观,

0 (No)
0(无)
1 (Yes)
1(是的)
2 (Conditional)
2(有条件的)

For example,

例如,

is_display : 1, is_editable : 2, is_mandatory : 0

This means that a field will be visible, will be editable based on a certain condition and it is not a mandatory field. For this field as the editable property a condition based, it will check another property called, editable_condition which holds a value like,

这意味着一个字段将是可见的，可以根据特定的条件进行编辑，而且它不是一个强制字段。对于这个字段，作为可编辑的属性，它将检查另一个名为editable_condition的属性，它包含一个值，

editable_condition : 1.1. Introductory Questions|111_what_is_the_inspection_typ|Onsite

editable_condition:1.1。入门问题| 111年_what_is_the_inspection_typ |现场

The value in between the | separated value is the unique_id, i.e., 111_what_is_the_inspection_typ in this case

在|分隔值之间的值为unique_id，即。，在本例中为111_what_is_the_inspection_typ

This unique_id represents another field, if that field value matches with the last | separated value, i.e., Onsite in this case, of this field then this field will be editable.

这个unique_id表示另一个字段，如果该字段值与最后一个|分隔值匹配，即。，在本例中，该字段的现场可编辑。

Here is a screenshot of the JSON,

这是JSON的截图，

Now my question is what will be the best possible way to handle such conditions to display the different types of fields like the checkboxes, radio buttons, textboxes, datepickers and so on.

现在我的问题是，如何最好地处理显示不同类型字段的情况，比如复选框、单选按钮、文本框、datepickers等等。

1 个解决方案

#1

Rather than trying to reinvent the wheel have you considered using a library such as angular-formly.

与其尝试重新发明*，你还考虑过使用像angular-formly这样的库。

This would allow you to declaratively specify the form via JSON e.g.

这将允许您通过JSON(例如)声明地指定表单。

HTML

<formly-form model="vm.user" fields="vm.userFields">
    <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</formly-form>

function YourCtrl() {
  var vm = this;

  vm.user = {};

  vm.userFields = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email'
      }
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        type: 'password',
        label: 'Password',
        placeholder: 'Password'
      }
    },
    {
      key: 'file',
      type: 'file',
      templateOptions: {
        label: 'File input',
        description: 'Example block-level help text here',
        url: 'https://example.com/upload'
      }
    },
    {
      key: 'checked',
      type: 'checkbox',
      templateOptions: {
        label: 'Check me out'
      }
    }
  ];
}

#1