AngularJS - 如果 $pristine 错误用于预填充 ng-model 值的输入，则禁用答案

【问题标题】：AngularJS - disable if $pristine bug for inputs with pre-filled ng-model valuesAngularJS - 如果 $pristine 错误用于预填充 ng-model 值的输入，则禁用
【发布时间】：2017-09-29 22:39:28
【问题描述】：

我有一个输入字段，该字段使用 ng-model 预填充了来自对象的 json 属性的值，如果此输入为空最初或如果它的值无效。

这是可行的，但是当页面加载时输入框中已经有数据作为值，输入被视为 $pristine，因为它没有被触及，即使有一个有效的值。因此，由于值有效而应该启用的按钮仍然处于禁用状态。

我可以将 $pristine 条件更改为 (personalDetailsForm.niNumber.$pristine && 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>

【问题讨论】：

我很讨厌 && 和 ||评估......但也许使用 && 代替 ||？
你不必检查它是否是$pristine，只需删除那种检查。 if form is $valid THEN send it.
@Nick 你能解释一下pattern=".{9}"这个模式的作用吗，我不擅长正则表达式！
与表单提交无关，它是关于在提交表单之前尝试动态启用或禁用按钮。 “验证”按钮不是表单的提交按钮
@Naren Murali - 只有当输入的长度正好是 9 个字符时才使输入有效

标签： javascript angularjs

【解决方案1】：

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

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

【讨论】：

如果删除了所有预填充的值，这仍然会导致按钮处于启用状态
向 ng-disabled 添加条件 niNumber === ''?这应该可以解决问题。

【解决方案2】：

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

之前：

<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

【讨论】：

@Nick 这对你有帮助吗？