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

当特定输入的值无效或原始时，我曾使用ng-disabled将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/。

最佳答案

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

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