gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 15:02:58 25 4
gpt4 key购买 nike

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

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

这是我的代码

`

<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

非常感谢。`

最佳答案

将 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

关于javascript - Angular 验证 - 启用/禁用输入字段会更改表单的有效性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46220540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com