当输入无效时，如何禁用表单提交锚？答案

【问题标题】：How can I disable a form submission anchor when the inputs are invalid?当输入无效时，如何禁用表单提交锚？
【发布时间】：2014-08-11 08:32:04
【问题描述】：

我有几个输入文本字段，我在其中应用了 required 和 pattern，我使用带有 ng-click 的锚标记来保存更改。样式在 UI 上效果很好，当输入值不符合要求时，元素变为红色。然而，用户仍然可以点击锚点。我希望能够做两件事之一，要么在输入元素无效时禁用锚点，要么在saveinfo() 函数中我希望能够验证输入值而无需重复模式和/或要求。

这是 html 的样子：

<input type="text" ng-model="Name" required pattern="[a-zA-Z -]+" />
<input type="text" ng-model="Description" required />
<a ng-click="saveinfo()"><img src="./img/save.svg" /></a>

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/15300067/…
为什么不将 ng-disabled='form.$invalid' 添加到您的锚标记中？
感谢提示家伙，我的问题是我没有将元素包装在表单中，一旦我这样做了，我就让它工作了。再次感谢。
锚点不应用于提交表单。改用按钮。

标签： javascript html angularjs

【解决方案1】：

您可以在锚标记上使用ng-disabled='formName.$invalid'，例如formName 是表单名称<form name="formName"></form>

<a ng-disabled='formName.$invalid' ng-click="saveinfo()"><img src="./img/save.svg" /></a>

或者你可以在函数内部检查它

    $scope.saveinfo= function(isValid) {

       // check to make sure the form is completely valid
      if (isValid) {
        alert('our form is amazing');
      }

    };

<a ng-click="saveinfo(formName.$valid)"><img src="./img/save.svg" /></a>

【讨论】：