如何基于动态模型字段禁用由JSON模板生成的表单输入？

看起来你已经在AngularJS里实现了基于JSON模板的动态表单，要给这些动态字段加禁用功能其实很直观，咱们分两种常见场景来实现：

1. 静态禁用（直接在模板中指定是否禁用） #

最简单的方式是给你的JSON模板字段添加一个disabled属性，用来标记该字段是否默认禁用：

修改后的JSON模板 #

[
  { "displayName":"EID", "internalName":"EID", "fieldType":"text", "disabled": true },
  { "displayName":"Name", "internalName":"PersonName", "fieldType":"text", "disabled": false }
]

更新HTML模板 #

在动态生成的input元素上添加ng-disabled指令，直接绑定字段的disabled属性：

<div class="item-inner" ng-if="f.fieldType == 'text'">
  <div class="item-title item-label">{{f.displayName}}</div>
  <div class="item-input-wrap">
    <input type="text" placeholder="" name="{{f.internalName}}" 
           ng-model="formData[f.internalName]" 
           ng-disabled="f.disabled">
  </div>
</div>

这样渲染出来的EID字段会直接被禁用，Name字段保持可编辑状态。

2. 动态条件禁用（根据表单其他字段值判断） #

如果需要根据表单中其他字段的内容来动态控制禁用状态，可以给JSON模板添加一个disableCondition字段，存储AngularJS可解析的表达式：

修改后的JSON模板 #

[
  { "displayName":"EID", "internalName":"EID", "fieldType":"text" },
  { "displayName":"Name", "internalName":"PersonName", "fieldType":"text", "disableCondition": "formData.EID !== ''" }
]

上面的规则表示：当EID字段不为空时，禁用Name字段。

实现方式一：直接在视图中使用$eval #

AngularJS的$eval方法可以直接解析作用域内的表达式，我们可以在ng-disabled中直接调用：

<div class="item-inner" ng-if="f.fieldType == 'text'">
  <div class="item-title item-label">{{f.displayName}}</div>
  <div class="item-input-wrap">
    <input type="text" placeholder="" name="{{f.internalName}}" 
           ng-model="formData[f.internalName]" 
           ng-disabled="f.disabled || (f.disableCondition && $eval(f.disableCondition))">
  </div>
</div>

实现方式二：封装控制器方法（更易维护） #

如果禁用逻辑比较复杂，建议在控制器中封装一个方法来统一处理：

// 在你的AngularJS控制器中
$scope.isFieldDisabled = function(field) {
  // 优先判断静态禁用配置
  if (field.disabled) return true;
  // 解析动态禁用条件
  if (field.disableCondition) {
    return $scope.$eval(field.disableCondition);
  }
  return false;
};

然后在HTML中调用这个方法：

<div class="item-inner" ng-if="f.fieldType == 'text'">
  <div class="item-title item-label">{{f.displayName}}</div>
  <div class="item-input-wrap">
    <input type="text" placeholder="" name="{{f.internalName}}" 
           ng-model="formData[f.internalName]" 
           ng-disabled="isFieldDisabled(f)">
  </div>
</div>

这种方式的好处是可以集中管理所有禁用逻辑，后续如果需要添加更复杂的规则（比如多条件组合、后端返回的禁用规则），只需要修改isFieldDisabled方法即可。

内容的提问来源于stack exchange，提问作者Nate23VT