javascript - 当输入无效时如何禁用表单提交 anchor ？

Question

我有几个输入文本字段，我在其中应用了必需的内容和模式，并使用带有 ng-click 的 anchor 标记来保存更改。该样式在 UI 上效果很好，当输入值不满足要求时，元素会变成红色。但是，用户仍然可以单击 anchor 。我希望能够执行以下两件事之一，要么在输入元素无效时禁用 anchor ，要么在 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>

Answer 1

您可以使用ng-disabled='formName.$invalid'在 anchor 标记上，例如 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>