私はこのような私のフォームを持っています：
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>
ご覧のとおり、入力が空の場合、ボタンは無効になりますが、テキストが含まれている場合、ボタンは有効に戻りません。どうすればそれを機能させることができますか？
フォームの名前とng-disabledを使用する必要があります。これがPlunkerのデモです。
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
この答えに追加します。フォーム名（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>
選択した応答は正しいですが、私のような人は、サーバー側にリクエストを送信する際の非同期検証で問題が発生する可能性があります-特定のリクエスト処理中にボタンが無効にならないため、ボタンが点滅します。これはユーザーにとってはかなり奇妙に見えます。
これを無効にするには、フォームの$pending状態を処理する必要があります。
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>
リアクティブフォームを使用している場合は、次を使用できます。
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
単純なディレクティブを作成し、すべての必須フィールドが入力されるまでボタンを無効にすることができます。
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');
}
});
}
};
}
);
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required/>
<button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>もう少し厳しくしたいなら