Forms 如何制作'；提交'；按钮被禁用？

如何禁用“提交”按钮，直到表单有效

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

从这个角度看，有一种方法可以禁用按钮，直到整个表单有效：

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

提交
在角度2.x.x，4，5

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


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


提交

如你所见：


不要使用loginForm.form，只使用loginForm
loginForm.invalid同样有效！loginForm.valid
如果希望向submit（）传递正确的值，则输入元素应具有name和ngModel属性

另外，这是当您不使用新的FormBuilder时，我推荐使用。使用FormBuilder时，情况就大不相同了。
在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>


名字
中名
姓
暴民人数
提交


可能是以下代码可以帮助：

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

提交
这对我很有效

.ts
.html
重要的是，在每个必需的输入标签中包含“必需的”关键字，以使其正常工作

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


...
登录
.html

<form [formGroup]="contactForm">

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

如何使用formBuilder获取radio和checkbox的值？引用的链接具有angular2的旧语法，例如
ng form modal
。请他更新thanx。检查这个例子，语法是最新的->如果禁用submit按钮，您如何验证表单（除非您在流程中这样做，但我并不总是喜欢这样）？请注意此处的UX问题..[disabled]=“ngForm.invalid”您也可以仅在使用中间验证时进行检查，例如在键入时。不要这样做。。例如，这段代码可能会回答这个问题，但提供关于它如何和/或为什么解决这个问题的附加上下文将提高答案的长期价值。
<input type="button" [disabled]="newForm.invalid" />

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

<form [formGroup]="contactForm">

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

contactForm: FormGroup;