Angular2表单 - 提交按钮已禁用？

Question

如果表单有效,是否应禁用"提交"按钮？最佳实践？

angular2是否具有可以在"提交"按钮上使用的ng-disabled？(ng-disabled对我不起作用.)

Answer 1

在这里看一个例子,在Angular 2中,这是一种禁用按钮的方法,直到整个表单有效:

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

Answer 2

在角2.xx的,4,5 ...

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

Answer 3

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

Answer 4

这是一个工作示例（您必须相信我，控制器上有一个 submit() 方法 - 它会打印一个对象，例如 {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
• loginForm.invalid 和 !loginForm.valid 一样有效
• 如果您希望 submit() 传递正确的值，则输入元素应具有 name 和 ngModel 属性

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