Question

我曾在AngularJs工作，现在正在研究Angular2。每当我搜索form validation in angular时，我总会找到如下所示的submit按钮：

在AnglarJs

<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

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

例如：电子邮件：如果电子邮件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.
  }
}

AngularJs：为什么我们始终保持表单提交按钮被禁用？

2 个答案: