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

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()。但没有任何效果。任何帮助将不胜感激。

为此添加代码笔示例:code

非常感谢。`

Answer 1

将 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