Question

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

在这种形式中，我在其中一个流程中启用/禁用输入字段。最初，当字段启用并为空时，将禁用“创建”按钮。禁用并启用字段后，将启用“创建”按钮。虽然输入字段仍为空。启用/禁用此部分的更多按钮超出此表单。

这是我的代码

`

＆＃13;

<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>

＆＃13;

尝试使用$ setUntouched（）和$ setPristine（）等一些事情。但没有任何工作。任何帮助将不胜感激。

为此添加一个codepen示例：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

Answer 2

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

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

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

2 个答案: