角度验证 - 启用/禁用输入字段会更改表单的有效性

Question

我有一个表格。在其中我有输入字段，并且我正在根据输入进行一些验证。此外，还有一个提交按钮，仅当表单有效时才启用。

在此表单中，我在其中一个流程中启用/禁用输入字段。 最初，当字段启用且为空时，创建按钮被禁用。在我禁用并启用这些字段后，创建按钮将变为启用状态。虽然输入字段仍然是空的。 启用/禁用此部分的更多按钮不在此表单中。

这是我的代码

`

<form method="post" novalidate id="example-widgets-form" name="mdnsCtrl.createSubDomainForm" valdr-type="SubDomain">
<div>
    <label>Domain Name</label>
    <input required type="text" name="subDomainName" placeholder="Domain Name" ng-model="mdnsCtrl.newDomain.name">
</div>
<div>
    <label>Description</label>
    <input type="text" name="subDomainDescription" placeholder="Description (Optional)" ng-model="mdnsCtrl.newDomain.description">
</div>
    <button type="button" aria-label="Create" ng-click="mdnsCtrl.createDomain();" 
    ng-disabled="mdnsCtrl.createSubDomainForm.$invalid">
        <span class="ng-scope">Create</span>
    </button>
</div>
</form>

尝试了一些方法，例如使用 $setUntouched() 和 $setPristine()。但没有任何工作。任何帮助将不胜感激。

为此添加一个 codepen 示例：code

非常感谢。 `

Answer 1

我认为您错过了描述输入的 必需 属性..

<input type="text" name="subDomainDescription" required ng-model="mdnsCtrl.newDomain.description">

Answer 2

将 Angular 与 jQuery 混合使用并不是一个好习惯。请阅读这篇精彩的帖子：“Thinking in AngularJS” if I have a jQuery background?

您可以使用ng-disabled="mdnsCtrl.formDisabled" 轻松实现请求的行为

JS

var ctrl = this;  
  ctrl.formDisabled = false;

  this.disable = function(){
    ctrl.formDisabled = true;  
  };

  this.enable = function(){
    ctrl.formDisabled = false;
  };

HTML

<div>
    <label>Domain Name</label>
    <input class="input-field" required type="text" name="subDomainName" placeholder="Domain Name"
           ng-disabled="mdnsCtrl.formDisabled"
           ng-model="mdnsCtrl.name" >
</div>
<div>
    <label>Description</label>
    <input class="input-field" type="text" name="subDomainDescription"
            ng-disabled="mdnsCtrl.formDisabled"
           placeholder="Description (Optional)" ng-model="mdnsCtrl.description">
</div>

Fixed Demo Codepen