web-dev-qa-db-ja.com

AngularJSでフォームが無効な場合に送信ボタンを無効にする

私はこのような形をしています：

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

ご覧のとおり、入力が空の場合、ボタンは無効になりますが、テキストが含まれている場合は有効に戻りません。どうやって動かすの？

formsangularjsbuttondisabled-control
170
ali

あなたはあなたのフォームの名前とng-disabledを使う必要があります： これがPlunkerのデモです

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

この答えに追加する。私はちょうどあなたがあなたのフォーム名にハイフンを使うならばそれがまた故障するだろうということを知りました（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>
32
wvdz

選択された応答は正しいですが、私のような人はサーバー側に要求を送信する際の非同期検証に問題があるかもしれません - ボタンは与えられた要求処理の間無効にされないでしょう。

これを無効にするには、フォームの$ pending状態を処理するだけです。

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

Reactive Formsを使用している場合は、これを使用できます。

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

単純なディレクティブを作成し、すべての必須フィールドが埋められるまでボタンを無効にすることができます。

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');
    }
   });
  }
 };
}
);

詳細はここをクリックしてください

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

もう少し厳密になりたい場合

1
Cengkuru Michael