javascript - AngularJS ng-disabled - 如果输入 $pristine 则不起作用，但如果输入 $pristine 则起作用

Question

如果表单中特定输入的值为空，我尝试禁用materializecss按钮，但只有当表单是$pristine时，我才能使用ng-disable成功禁用它，而不是在输入上。

这有效:

data-ng-disabled="mainDetailsForm.$pristine"

但这不是:

data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"

这不是:

data-ng-disabled="niNumberInput.$pristine"

-

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

-

完整 HTML:

<form id="mainDetailsForm" name="mainDetailsForm">

<div class="row">

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

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

        <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-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>

    </div>

</div>

</form>

Answer 1

要通过表单访问各个输入的属性，您需要为输入提供 ng-model。 ng-model 属性是绑定(bind)它的。我更新了你的jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ (我还必须让 Angular 在 fiddle 中正常工作)。

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

文档中的这一小行很重要“为了允许表单和控件的样式，ngModel 添加了这些 CSS 类:”它列出了 $dirty、$pristine 等。文档特别指出它们绑定(bind)到 ng-模型。 https://docs.angularjs.org/guide/forms