Question

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

Answer 1

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

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

Answer 2

您应该将所需属性添加到niNumberInput。

通过添加必需属性angular将检查输入字段是否为空白，如果为空则则为无效

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

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

2 个答案: