Question

我通过迭代一个字段对象数组来动态创建表单视图，我将它们作为模型对象的一部分进行装箱。

xyzModel=   [
            { field: 'abc', type: 'text', displayLabel: 'abc', inputType: 'text', isRequired: true},
            { field: 'xyz', type: 'text', displayLabel: 'xyz', inputType: 'text', sRequired: true},
            { field: 'mno', type: 'text', displayLabel: 'mno', inputType: 'text', isRequired: false,},
            { field: 'rsh', type: 'text', displayLabel: 'rsh', inputType: 'text', isRequired: false, },
            { field: 'lyz', type: 'drop_down', displayLabel: 'lyz', inputType: 'text', isRequired: true, },
            { field: 'def', type: 'drop_down', displayLabel: 'def', inputType: 'text', isRequired: true, },
    ]

每个模块都有自己的模型对象，可以有不同的字段和不同的字段

我正在尝试找到一个解决方案，我可以根据下拉选择值禁用/启用字段。

这就是我创建表单页面的方式。

<div ng-repeat="field in xyzModel " flex="100" class="p-5" ng-switch="field.inputType">
  <md-input-container class="md-block" ng-switch-when="dropdown">
    <label translate>{{field.displayLabel}}</label>
    <md-select placeholder="{{field.displayLabel}}" ng-model="anotherModle[field.field]"  ng-required="field.isRequired">
      <md-option ng-value="item.id" ng-repeat="item in data[field.Source].data">{{item.value}}</md-option>
    </md-select>
  </md-input-container>
  <md-input-container class="md-block" ng-switch-when="date">
    <md-datepicker ng-model="vm.anotherModel[field.field]" md-placeholder="field.displayLabel" ng-required="field.isRequired">
  </md-input-container>
  <md-input-container class="md-block" ng-switch-default>
    <label translate>{{field.displayLabel}}</label>
    <input name="{{field.field}}" ng-model="vm.anotherModel[field.field]" type="{{field.inputType}}" ng-required="field.isRequired"">
  </md-input-container>
</div>

如何根据下拉选择启用/禁用动态表单元素

0 个答案: