フォームのtextareaとbuttonをバインドしボタンを無効化する

ng-disabledディレクティブでbool値に応じたbuttonの制御が可能

フォームを送信した後にボタンを無効化する。正確にはtextareaが空の場合にはbuttonにdisabled属性を付加する。

textareaに文字を入力すると、buttonのdisabledが解除されるようにしてみる。

textareaとbuttonを連動させるために、textareaにng-modelを設定する。

<textarea id="right-label" placeholder="文章を入力" ng-model="Body"></textarea>

ng-modelにBodyという値を設定した。この値をbutton側でng-disabledの値として設定する。

<button class="right inline" ng-click="addAnswer(Body)" ng-disabled="!Body" type="submit">回答する</button>

ng-disabledはbool値に応じて、buttonにdisabled属性を追加/削除する。

上のコードの場合は、Bodyが空でない場合(textareaに文字が入力された場合)にdisabled属性が外れるようにしてある。そのため、アプリを起動したタイミングでは、disabled属性が追加されているようにbuttonを設定するコードになる。

動作確認

formに上で載せたtextareaタグとbuttonタグを書いて、chromeのjsインスペクタを開いた状態が下の画像になる。

オレンジで線を引いた部分で確認できるように、初期状態でbuttonにdisabled属性が追加されている。そして、textareaに文字を入力すると、ng-model経由でBodyのデータが追加されていく。

button側では、ng-disabledでBodyを設定しているため、textareaの動きに応じて、disabled属性をオンオフすることができるようになる。textareaに文章を入力することで、無効化されていたボタンを押すことが出来るようになる。