Question

我有使用required验证的表单字段。问题是，在呈现表单时会立即显示错误。我希望它只在用户提交后显示。

我的问题类似于this one。

但在我的情况下，我在表单中有多个buttom，因此我不了解如何实现ng-submit或解决我的问题。

这是我Plunker 我想做什么。

HTML表单：

  <form name="myForm">
    <table>
      <tr>
        <td>
          <input type="text" ng-model="oldName">
        </td>
        <td>
          <button ng-click="copyName()"> Copy >> </button>
        </td>
        <td>
          <input type="text" name="newName" ng-model="newName" required>
        </td>
      </tr>
       <tr>
        <td>
          <input type="text" ng-model="oldEmail">
        </td>
        <td>
          <button ng-click="copyEmail()"> Copy >> </button>
        </td>
        <td>
          <input type="email" name="newEmail" ng-model="newEmail">
        </td>
      </tr>
    </table>

    <br>
    <button ng-click="Submit()">Submit </button>

  </form>

Answer 1

您只需将$scope.myForm.$setSubmitted()放入$scope.submit功能中即可设置您的表单。现在，在您的错误消息ng-show中，您可以使用以下内容：

<div ng-show="myForm.$submitted && myForm.newEmail.$invalid">
  <strong>invalid email </strong>
</div>

working plunker

提交后进行角度验证

1 个答案: