AngularJs：为什么我们总是禁用表单提交按钮？

Question

我在 AngularJs 上工作过，现在在 Angular2 上工作。每当我搜索form validation in angular 时，我总是会找到submit 按钮，如下所示：

在 AngularJs 中

<input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">

在 Angular2 中

<button type="submit" class="btn btn-default"
             [disabled]="!heroForm.form.valid">Submit</button>

但我希望提交按钮应该被启用，并且当用户点击它时，我们会在文本字段下方提示错误。为此目的没有提到确切的解决方案。

我发现有些用户直接点击提交按钮，他们只想填写所需的文件。

这只是我的观察，可能你们中的一些人在开发过程中也有同样的经历。

对于 AngularJs 1，我从这里使用 custom-submit 指令

https://gist.github.com/maikeldaloo/5133963

所以请建议我在 angular2 中提供 custom-submit 的任何解决方案。

---- 登录表单示例 (Angular2) ---

<form class="ui large form" (ngSubmit)="onUserLogin(loginForm.form.valid)" #loginForm="ngForm" method="post" novalidate> 
            <sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
            <div class="field">      
              <input type="email" name="email" placeholder="Email" [(ngModel)]="login.email" #email="ngModel" required />
              <div [hidden]="email.valid || email.pristine" class="error text-left">
                Email is required
              </div>
            </div>
            <div class="field">      
              <input type="password" name="password" placeholder="Password" [(ngModel)]="login.password" #password="ngModel" required />
              <div [hidden]="password.valid || password.pristine" class="error text-left">
                Password is required
              </div>
            </div>            
            <button class="fluid yellow large ui button" type="submit">Login</button>
        </form>

请检查custom-submit 指令在做什么。请在此基础上给我答案。我知道我可以在控制器级别检查表单的有效状态，但是为什么这样我只能说表单无效，我不能说哪个字段是空的（我们也可以检查这个哪个字段有效，但不知道如何从控制器启用错误 div)

请参考... https://gist.github.com/maikeldaloo/5133963

谢谢，

Answer 1

只需设置一个状态并根据状态显示/隐藏错误：

onSubmit() {
  if(hasErrors()) {
    this.hasErrors = true;
    return false; // preventDefault
  }
  this.postData(); // process submit event
}

<div *ngIf="hasError">
  ... error info here
</div>

Answer 2

通过这种方式，我们实际上验证您是否输入了正确的值。如果任何值失败，则提交按钮将被禁用，否则将启用。

例如：E-mail : 如果email id 没有@ 和.，那么它会被认为是脏的，这不会导致启用提交按钮。

已编辑：

要显示消息，您可以做一件事：

<input type="submit" ng-click="done(heroForm.form.valid)" />

在控制器中你可以这样做。

$scope.done = function(valid){
  if(valid) {
   // Form content is valid, process it
  } else {
  // show error and do nothing.
  }
}