Question

我正在开发一个AngularJS1.x应用程序，我必须根据某些条件生成动态表单字段。整个动态表单字段类型，字段验证，条件来自JSON。字段类型可以是文本框，选择框，日期选择器，单选按钮或复选框。

试图完成：我正在尝试一个更简单的过程来根据条件生成表单字段。

对于每种字段类型，有3个条件，

is_mandatory
is_editable
is_display

他们的价值观可以是，

0（否）
1（是）
2（有条件的）

例如，

is_display : 1, is_editable : 2, is_mandatory : 0

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

editable_condition : 1.1. Introductory Questions|111_what_is_the_inspection_typ|Onsite

|分隔值之间的值是 unique_id ，即111_what_is_the_inspection_typ in this case

此 unique_id 表示另一个字段，如果该字段值与此字段的最后|分隔值（即此情况下为Onsite）匹配，则此字段将为可编辑。

这是JSON的屏幕截图，

现在我的问题是处理这些条件的最佳方式是显示不同类型的字段，如复选框，单选按钮，文本框，日期选择器等。

Answer 1

您考虑使用angular-formly等库，而不是尝试重新发明轮子。

这将允许您通过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>

JS

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'
      }
    }
  ];
}

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

1 个答案: