Javascript 验证失败时防止表单提交（棱角材料）

我刚刚发现了角度和材料设计，我真的很喜欢所有的功能，从盒子出来。我创建了一个带有验证的联系人表单，当需要某个字段或该字段的格式不正确时，该表单会给出错误消息。唯一缺少的是，当用户单击“提交”按钮时，他们仍然可以将表单发送到服务器。因此，错误消息并没有真正的帮助

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>

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

---

以下是当表单无效时禁用提交按钮的方法。

：

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

提交

您可以试试这个

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

假设您的表单如下所示

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

---

当表单无效时，只需禁用“提交”按钮。我该怎么做？用户是否仍然可以按enter键并提交表单？谢谢，但这不会阻止用户通过enter按钮提交表单。Angular中的表单通常没有操作，通常在控制器中处理。如果您遵循该模式，则可以检查

$scope.projectForm.$valid

，如果无效则返回。您能给我一个示例吗？我尝试使用

ng submit=“projectForm.$valid&&submit（）”

但它仍然允许我使用enter按钮提交

ng submit

是在单击submit按钮或按下enter时在控制器中调用的方法。因此，您可以使用

ng submit=“submit（）”

，然后在控制器的

$scope.projectForm.$valid中的
$scope.submit
函数中检查
$scope.projectForm.$valid
，然后再继续处理值所需的任何代码。如果无效，则返回
return。如果表单组包含验证器，则只需将
[disabled]=“this.userForm.invalid”
放在html文件中的按钮上即可
 if (!this.userForm.valid) {
    return;
  }