如何禁用“提交”按钮？

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

Angular2是否等价于可以在 Submit 按钮上使用的 ng- 禁用? (ng- 禁用对我来说不起作用。)

296711 次浏览
小开
最佳答案

正如在这个角度 例子中看到的，有一种方法可以禁用一个按钮，直到整个形式是有效的:

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

下面是一个工作示例(你必须相信控制器上有一个提交()方法——它打印一个 Object，比如{ user: ‘ abc’} ，如果在输入字段中输入‘ 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
  • 无效的工作以及
  • 如果希望传递正确的值，那么 input 元素应该具有 name 和 ngModel 属性

另外，当你不使用新的 FormBuilder 的时候，我建议你这么做。

小开

在角度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

newForm : FormGroup;

Html

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

Html

<form [formGroup]="contactForm">


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

. ts

contactForm: FormGroup;

提交答案