时间戳

首页 > 解决方案 > 禁用基于动态模型字段的输入

angularjs - 禁用基于动态模型字段的输入

问题描述

我正在使用 json 表单模板文件为我的表单动态生成模型。

示例 JSON：

{
    "displayName":"EID",
    "internalName":"EID",
    "fieldType":"text"
},
{
    "displayName":"Name",
    "internalName":"PersonName",
    "fieldType":"text"
},

表单 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]"
               [disabled]="formData['EID'].length >1">
        <span class="input-clear-button"></span>
   </div>
</div>

JS文件：

$scope.formData = {};

$scope.submit = function () {
            $http({
                method: 'POST',
                url: '/api/postForm',
                data: JSON.stringify(this.formData),
                headers: { 'Content-Type': 'application/json' }
            }).then(function (response) {
                console.log(response);
                alert('success');
            }, function (error) {
                alert('fail');
            });
        };

似乎不起作用的是我的禁用声明 - 如果 EID 输入字段中有值，我正在尝试禁用任何字段。我不确定如何引用动态模型名称。我还预见到 EID 字段在输入后会自行禁用的问题。

标签： angularjsangular-forms

解决方案

正如评论中提到的，[disabled]angularjs 中没有（模板中的方括号是新 angular 的绑定），因此动态更改禁用状态的方法是使用 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="formData[f.internalName].length >1"/>
      <span class="input-clear-button"></span>
   </div>
</div>

推荐阅读