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

Question

我正在使用 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 字段在输入后会自行禁用的问题。

Answer 1

正如评论中提到的，angularjs中没有[disabled]（模板中的方括号是对新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>

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

Disable input based on dynamic model field

angularjs

angular-forms