验证失败时阻止表单提交（Angular Material）

Posted 2023-03-05

【中文标题】验证失败时阻止表单提交（Angular Material）

【英文标题】：Prevent form submission when validation fails (Angular Material)

【发布时间】：2016-07-30 10:46:33

【问题描述】：

我刚刚发现了 Angular 和 Material 设计，我真的很喜欢开箱即用的所有功能。我创建了一个带有验证的联系表单，当字段是必需的或格式不正确时，它会给出错误消息。唯一缺少的是，当用户单击“提交”按钮时，他们仍然可以将表单发送到服务器。所以错误消息并没有真正的帮助。

HTML：

<md-content layout-padding="">
  <form name="projectForm" action="/" method="post" novalidate>
    <div layout-gt-sm="row">
      <md-input-container class="md-block" flex-gt-sm="">
        <label>Email</label>
        <input required="" type="email" name="emailAddress" ng-model="project.emailAddress" ng-pattern="/^.+@.+\..+$/">
        <div ng-messages="projectForm.emailAddress.$error" role="alert">
          <div ng-message-exp="['required', 'pattern']">
        Your email must be in correct format and look like an email address.
      </div>
    </div>
  </md-input-container>
</div>
<md-input-container class="md-block">
  <label>Message</label>
  <textarea required="" name="content" md-maxlength="50" ng-model="project.content" rows="3" md-select-on-focus=""></textarea>
  <div ng-messages="projectForm.content.$error" role="alert">
    <div ng-message="required">
      Your must enter a message.
    </div>
  </div>
</md-input-container>
<md-button type="submit" class="submit">Submit</md-button>

JS：

angular
  .module('toast', ['ngMaterial', 'ngMessages'])
  .controller('formCtrl', function($scope) 
    $scope.project = 
      //scope stuff goes here
    ;
  )

这里是Codepen。

【问题讨论】：

当表单无效时禁用提交按钮。

我该怎么做？用户仍然不能按 Enter 并提交表单吗？

【参考方案1】：

你也可以使用 add [disabled]="projectForm.$invalid" 到： 提交

【参考方案2】：

这个你可以试试

对于最新的角度，您可以使用下面的简单代码在类型脚本中验证您的表单

假设您的表单如下所示

<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">

你可以像这样验证它的状态

 if (!this.userForm.valid) 
    return;
  

【讨论】：

如果您的 FormGroup 包含验证器，它可以像在 html 文件中的按钮上放置 [disabled]="this.userForm.invalid" 一样简单

【参考方案3】：

表单无效时禁用提交按钮：

<md-button type="submit" class="submit" ng-disabled="projectForm.$invalid">Submit</md-button>

【讨论】：

谢谢，但这不会阻止用户通过输入按钮提交。

Angular 中的表单通常没有动作，通常在控制器中处理。如果您遵循该模式，您可以检查$scope.projectForm.$valid，如果它无效则返回。

你能给我举个例子吗？

我尝试使用ng-submit="projectForm.$valid && submit()"，但它仍然让我使用回车按钮提交

ng-submit 是在点击提交按钮或按下回车时在控制器中调用的方法。因此，您将使用ng-submit="submit()"，然后在控制器中的$scope.submit 函数中检查$scope.projectForm.$valid，然后再继续处理这些值所需的任何代码。如果它无效，只需return;。