Question

所以，如果没有填写必填字段，我开始要求禁用提交按钮。

<form name="form">
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/>
  <input type="text" placeholder="First Name" data-ng-model="model.lastName" name="lastname"  ng-required="true" /><br/>

  <button type="button" ng-disabled="form.$invalid">Submit</form>

到目前为止一切顺利。但是，如果存在以下附加验证字段，则上述操作将无效，因为如果不填写所需字段而不考虑其他验证，则仅禁用提交按钮。

<form name="form">
  <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" ng-minLength="5" /><br/>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" name="lastname"  ng-required="true" ng-minLength="3" ng-maxLength="10" /><br/>

  <button type="button" ng-disabled="form.$invalid">Submit</button>
</form>

我本可以独立地编写一个膨胀的解决方案$watch控制器中每个表单的每个输入值的更改，但它是单调乏味的，不可重用。我期待的是更通用的内容如下：

<button type="button" ng-disabled="!form.$required">Submit</button>

也许我错过了某些已经可用的现有功能。但我认为禁用提交按钮直到填写所有必填字段是UX / UI非常常见的。

Answer 1

AFAIK没有像你提到过的简单解决方案，你可以写一个包含form指令的指令并在表单中设置一个标志（通过观察ng-required表单字段）或者，在带有窗体的控制器中有一个范围函数，如

function disableSubmit() {
   return form.FirstName.$error.required || form.LastName.$error.required;
}

<button type="button" value="SAVE" ng-disabled="disableSubmit()">Submit</button>

在这里添加@ kubuntu的jsFiddle。 liftA2

ngdisabled的通用解决方案仅包含必填字段

1 个答案: