Angular2表单 – 提交button被禁用？
提交button应该被禁用，直到表单有效？ 最佳实践？
angular2是否具有可用于提交button的ng-disabled？ （ng-disabled对我不起作用。）
在这里看到一个例子 ，在Angular 2中，这是一种方法来禁用一个button，直到整个表单有效：
<button type="submit" [disabled]="!ngForm.valid">Submit</button> 在Angular 2.xx ， 4，5 …
<form #loginForm="ngForm"> <input type="text" required> <button type="submit" [disabled]="!loginForm.form.valid">Submit</button> </form>
表单validation在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>
检查这个plunker的演示
更多信息
这里是一个工作示例（您必须相信我，控制器上有一个submit（）方法 – 如果在input字段中input了'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（）传递正确的值，input元素应该有name和ngModel属性
此外，这是当你不使用新的FormBuilder，我build议。 使用FormBuilder时，情况会非常不同。
