Question

我有这样的表格：

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

如您所见，如果输入为空，则按钮被禁用但在包含文本时不会更改回启用状态。我怎样才能使它发挥作用？

Answer 1

您需要使用表单名称以及ng-disabled：Here's a demo on 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状态：

public class CustomImageView extends ImageView {

    private int resID;

    public CustomImageView(Context context) {
        super(context);
    }

    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setImageResource(int resId) {
        this.resID = resId;
        super.setImageResource(resId);
    }

    public int getResourceId() {
        return resID;
    }
}

Answer 4

如果您使用的是活动表格，可以使用：

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

Answer 5

我们可以创建一个简单的指令并禁用该按钮，直到填满所有必填字段。

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

For More Info click here

Answer 6

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

如果你想要更严格一点

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

6 个答案: