如何禁用“提交”按钮？答案

【问题标题】：How to make 'submit' button disabled?如何禁用“提交”按钮？
【发布时间】：2015-11-10 18:41:08
【问题描述】：

如何在表单有效之前禁用“提交”按钮？

angular2 是否具有可用于提交按钮的等效 ng-disabled 功能？（ng-disabled 对我不起作用。）

【问题讨论】：

仅当您使用中间验证时，例如在打字时。不要这样做.. 仅具有良好的思想或异步验证，例如依赖于后端。

【解决方案1】：

正如在这个 Angular example 中看到的那样，有一种方法可以在整个表单有效之前禁用按钮：

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

【讨论】：

如何使用 formBuilder 获取单选框和复选框的值？
引用链接具有 angular2 的旧语法，例如 ng-form-modal。请他更新thanx。
查看这个例子，语法是最新的 -> blog.jhades.org/…
如果禁用提交按钮，如何验证表单（除非您在流程中执行此操作，但我并不总是这样）？请注意这里的用户体验问题..
[disabled]="ngForm.invalid" 你也可以查看

【解决方案2】：

在 Angular 2.x.x、4、5 ...

<form #loginForm="ngForm">
    <input type="text" required> 
    <button  type="submit"  [disabled]="loginForm.form.invalid">Submit</button>
</form>

【讨论】：

【解决方案3】：

.html

<form [formGroup]="contactForm">

<button [disabled]="contactForm.invalid"  (click)="onSubmit()">SEND</button>

.ts

contactForm: FormGroup;

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案4】：

这是一个工作示例（您必须相信我，控制器上有一个 submit() 方法 - 如果在输入字段中输入了 'abc'，它会打印一个对象，例如 {user: 'abc'} ):

<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
    <input type="text" name="user" ngModel required>
    <button  type="submit"  [disabled]="loginForm.invalid">
        Submit
    </button>
</form>

如你所见：

不要使用loginForm.form，只使用loginForm
loginForm.invalid 和 !loginForm.valid 一样有效
如果您希望 submit() 传递正确的值，输入元素应具有 name 和 ngModel 属性

此外，这是您不使用我推荐的新 FormBuilder 的时候。使用 FormBuilder 时情况大不相同。

【讨论】：

【解决方案5】：

Angular 2 中的表单验证非常简单

这是一个例子，

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

 <div class="form-group">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname" 
   required [(ngModel)]="firstname" name="firstname">
 </div>

 <div class="form-group">
  <label for="middlename">Middle Name</label>
  <input type="text"  class="form-control" id="middlename" 
   [(ngModel)]="middlename" name="middlename">
 </div>

 <div class="form-group">
  <label for="lastname">Last Name</label>
  <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
 </div>

 <div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  
   minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$" 
   [(ngModel)] = "mobnumber" name="mobnumber">
 </div>

 <button type="submit" [disabled]="!myForm.form.valid">Submit</button>

</form>

Check this plunker for demo

More info

【讨论】：

【解决方案6】：

这对我有用。

.ts

newForm : FormGroup;

.html

<input type="button" [disabled]="newForm.invalid" />

【讨论】：

【解决方案7】：

在每个强制输入标签中都包含“required”关键字以使其正常工作，这一点很重要。

 <form (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
    ...
    <input ngModel required name="username" id="userName" type="text" class="form-control" placeholder="User Name..." />
    <button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>

【讨论】：

【解决方案8】：

下面的代码可能会有所帮助：

<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>

【讨论】：