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

Posted 2023-02-22

【中文标题】AngularJs：为啥我们总是禁用表单提交按钮？

【英文标题】：AngularJs: Why we always keep form submit button disabled?AngularJs：为什么我们总是禁用表单提交按钮？

【发布时间】：2017-02-27 06:40:57

【问题描述】：

我在 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

谢谢，

【问题讨论】：

不禁用按钮有什么问题？

什么都没有，但是当我点击提交按钮时，它应该在文本字段或其他字段下方提示错误消息。

如果它的角度为 1，您可以使用 ng-messages 指令，如果您使用 A2，则添加 span/div 并根据表单字段有效性显示/隐藏验证

@PankajParkar 刚刚添加了我的登录表单 html 代码。我正在使用div 来显示错误消息。

【参考方案1】：

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

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

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

【讨论】：

这可能是解决方案之一，但是如果表单中有多个字段并且您必须在字段下方显示每个错误，您将如何处理。请检查我的登录 HTML 代码。

每个输入都可以有这样的<div *ngIf="hasError">。您还可以构建一个自定义输入组件，其中包含输入和显示错误的部分。

您能否根据我的 HTML 表单更新您的答案。

【参考方案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.
  

【讨论】：

是的，它应该在那里（当您在文本字段中输入内容时它应该检查验证）但我需要在用户单击提交时事先向用户显示错误消息。

编辑了答案:)