javascript - AngularJS ng-disabled 按钮如果输入 $pristine - 如果所有文本突出显示并删除则不起作用

Question

当特定输入的值无效或原始时，我使用 ng-disabled 将禁用属性添加到 anuglar 应用程序的 MaterializeCSS 按钮中，但有一个错误导致该按钮在以下情况下仍处于启用状态:输入值有效，所有文本都会突出显示并立即删除。

-

HTML:

<div input-field class="input-field col-xs-12 col-md-4">

    <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-md-1">

    <button data-ng-click="verifyNINumber()" data-ng-disabled="mainDetailsForm.niNumber.$invalid || mainDetailsForm.niNumber.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>

</div>

-

JSFiddle:https://jsfiddle.net/6qswosh8/2/ .

Answer 1

您可以将 required 添加到 input 元素中:

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