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

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 Controller 中每个表单的每个输入值的变化，但它很乏味且不可重用。我期待的是更通用的东西，如下所示:

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

也许我错过了一些/一些已经可用的现有功能。但我认为，在填写所有必填字段之前禁用提交按钮对于 UX/UI 来说是非常常见的事情。

Answer 1

据我所知，没有像您提到的那样简单的解决方案，您可以编写一个包含表单指令的指令并在表单中设置一个标志(通过观察 ng 所需的表单字段)或者，在具有表单的 Controller 中具有类似

的作用域函数

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

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

在此处添加 @kubuntu 的 jsFiddle。 http://jsfiddle.net/3eqz2/421/