当表单与AngularJS无效时,禁用提交按钮

Question

我的表格是这样的:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

正如您所看到的,如果输入为空,则按钮被禁用但在包含文本时不会更改回启用状态.我怎样才能使它工作？

Answer 1

您需要使用表单的名称以及ng-disabled:这是关于Plunker的演示

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Answer 2

添加到这个答案.我刚刚发现如果你在表单名称(Angular 1.3)中使用连字符,它也会崩溃:

因此,这将不工作:

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

Answer 3

选择的响应是正确的,但像我这样的人,可能会遇到异步验证问题,并向服务器端发送请求 - 在给定的请求处理期间,按钮不会被禁用,因此按钮将闪烁,这对用户来说看起来很奇怪.

要使其无效,您只需处理表单的$ pending状态:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Answer 4

如果您使用的是反应式表格，则可以使用以下方法：

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>