Question

我有一个输入字段，使用ng-model预先填充了对象的json属性中的值，如果此输入为空最初，则我尝试禁用按钮如果它的值无效。

这样可行，但是当页面将输入框中已有的数据作为值加载时，输入将被视为$ pristine，因为即使存在有效值，也未触及该输入。因此，仍应禁用因有效值而应启用的按钮。

我可以将$ pristine条件更改为（personalDetailsForm.niNumber。$ pristine＆amp;＆amp; personalDetailsForm.niNumber。$ invalid），当输入中有预先填充的值时，它会正确启用加载按钮，但是如果删除了预填充值，则不会将输入视为无效。

有什么方法吗？

HTML：

<div input-field class="input-field col-xs-12 col-sm-6 col-md-2">
    <input id="niNumberInput" name="niNumber" type="text" class="validate" pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="niNumber">
    <label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-sm-6 col-md-1">
    <button data-ng-click="verifyNINumber()" data-ng-disabled="personalDetailsForm.niNumber.$invalid || personalDetailsForm.niNumber.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>

Answer 1

您可以添加另一项检查，以确保表格在保持原始状态的同时无效。这样，如果表单无效，或者如果表单是原始的但同时无效，则禁用该按钮。

ng-disabled=personalDetailsForm.niNumber.$invalid || (personalDetailsForm.niNumber.$pristine && personalDetailsForm.niNumber.$invalid)

Answer 2

问题是你的pattern属性的正则表达式不处理空输入字段，因此按钮已启用，如果在元素中添加required属性，则其工作正常。< / p>

<强>之前：

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="niNumber">

<强>后：

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
pattern=".{9}" placeholder="{{niNumber}}" data-ng-model="test" required>

如果它与元素名称不同，请为ng-model使用不同的变量名称。问题的解决方法是添加required属性，该属性将检查空输入元素，该元素不由ng-pattern处理。

替代解决方案（推荐）：

<input id="niNumberInput" name="niNumber" type="text" class="validate" 
ng-maxlength="9" ng-minlength="9" placeholder="{{niNumber}}" data-ng-model="test" required>

上面的代码与正则表达式完成相同的工作，但它仅使用角度验证，更容易理解：p

请在下面找到解决方案的演示。

JSFiddle Demo

AngularJS - 对具有预填充ng模型值的输入禁用$ pristine错误

2 个答案: