我试图检查是否在2个输入字段上满足4个条件中的1个，以便在ng-disabled指令中使用AngularJS表达式启用“保存”按钮。
仅在满足前两个条件的情况下，以下代码才会启用“保存”按钮。因此，如果用户在电子邮件输入字段中输入任何文本，从而使该文本成为$dirty和$valid，则将启用“保存”按钮。但是，如果用户在用户名输入字段中输入任何文本，则“保存”按钮将保持禁用状态。
我如何才能看到最后两个条件？
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<label>Username</label>
<input type="text" name="username" ng-model="user.name" required>
<label>Email</label>
<input type="text" name="email" ng-model="user.email" required>
<button type="submit" ng-disabled="userForm.email.$pristine || userForm.email.$invalid || userForm.username.$pristine || userForm.username.$invalid">Save</button>
</form>
我最终增加了2个条件。现在，它几乎可以完美运行。
页面加载时，默认情况下将禁用“保存”按钮，因为两个字段均为$prisitine。如果我在用户名或电子邮件字段中删除字符或向其中添加字符，则因为该字段为，所以将激活“保存”按钮$dirty。这样行得通。
如果我首先编辑用户名，问题就会开始发生。如果我创建了一个新的有效用户名，然后开始编辑电子邮件字段，我将在编辑过程中遇到电子邮件无效的问题，例如 email或email@或，email@email.并且在这些情况下，我们希望“保存”按钮被禁用，但它不会被禁用。用户名一旦确定就以某种方式$valid忽略了电子邮件为的事实$invalid。
它不止于此。如果我加载页面并开始逐字符删除预加载的电子邮件地址char并点击所有$invalid位置，我将看到在每个$invalid位置成功禁用“保存”按钮。这让我发疯。
form(name="userForm", ng-submit="submitForm(userForm.$valid)", novalidate)
div.form-group
label Username
input.form-control(type="text", name="username", ng-model="user.name", ng-minlength="3", ng-maxlength="23", required)
div.error(ng-show="userForm.username.$invalid && userForm.username.$dirty")
p.help-block(ng-show="userForm.username.$error.minlength") Username is too short.
p.help-block(ng-show="userForm.username.$error.maxlength") Username is too long.
p.help-block(ng-show="userForm.username.$error.required") Username is required.
div.form-group
label Email
input.form-control(type="email", name="email", ng-model="user.email", required)
div.error(ng-show="userForm.email.$invalid && userForm.email.$dirty")
p.help-block(ng-show="userForm.email.$error.required") Email is required.
button(ng-model="button", ng-disabled="(userForm.username.$error.minlength || userForm.username.$error.maxlength || userForm.username.$error.required || userForm.username.$pristine || userForm.username.$invalid) && (userForm.email.$error.required || userForm.email.$pristine || userForm.email.$invalid)") Save
我找到了启用“保存”按钮的更好方法。
<button type="submit" ng-disabled="userForm.$pristine || userForm.$invalid">
现在工作完美。
也许您可以仅通过检查formis$invalid和input是否为来切换提交按钮的状态$pristine。
因此，您的输入将是
<input
type="text"
name="username"
placeholder="user name"
ng-model="user.name"
ng-minlength="3"
ng-maxlength="23"
required></input>
<input
type="email"
name="email"
placeholder="email"
ng-model="user.email"
required></input>
<button
type="submit"
ng-disabled="(userForm.username.$pristine || userForm.email.$pristine) || userForm.$invalid">Save</button>
<-- ng-disabled="(userForm.$pristine || userForm.$invalid" -->
在此处查看相关的Plunker http://plnkr.co/edit/7pkRAn “”
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句