

MaterialDesignLite（以下、MDL）とangularJsを使って書いてます。MDLは1.04、angularは1.4.5です。

[code]

    <form name="myForm" ng-submit="onsubmit()" novalidate>
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
     <label class="mdl-textfield__label" for="passwd">パスワード：</label><br />
     <input class="mdl-textfield__input" id="passwd" name="passwd" type="password" ng-model="user.passwd" required ng-minlength="8" />
     <span class="mdl-textfield__error mdl-color-text--black" ng-show="myForm.passwd.$error.required">
     パスワードは必須です。</span>
     <span class="mdl-textfield__error mdl-color-text--cyan" ng-show="myForm.passwd.$error.minlength">
     パスワードを8桁以上で設定してください。</span>
    
[/code]

  
  
となっています。このclassに使っている[mdl-
textfield__error]を指定していると、パスワードを3桁入れるとほんらないならばパスワードを8桁以上で設定してくださいが表示されるはずなのに何も表示されません。しかしバリデーションはチェックされています。（図1）

図１  
[![３桁入れても表示されない](https://i.stack.imgur.com/xG54d.jpg)](https://i.stack.imgur.com/xG54d.jpg)

ところが、図２のように何も入れないと表示されます。

図２  
[![何も入れないとちゃんと表示される。](https://i.stack.imgur.com/6YeXj.jpg)](https://i.stack.imgur.com/6YeXj.jpg)

そのため、MDLが悪さしているのかと思い、CSSを外しました。（Classを抜きました）

図３  
[![classを抜いて３桁](https://i.stack.imgur.com/t8kcq.jpg)](https://i.stack.imgur.com/t8kcq.jpg)

そうするとちゃんと表示されます。  
ちなみに、すべての設定が動くか調べると、

図４  
[![何も入ってない](https://i.stack.imgur.com/sHBfq.jpg)](https://i.stack.imgur.com/sHBfq.jpg)

何も入っていない状態でも動きますし、８桁入れると表示されません。

図５  
[![画像の説明をここに入力](https://i.stack.imgur.com/EK3aU.jpg)](https://i.stack.imgur.com/EK3aU.jpg)

ということで、MDLを使ってDOMを更新したいのですが、classにerrorメッセージ表示時に２個目以降は何を入れればよいのかわからないので、おしえて頂ければと思います。宜しくお願いします。


CC BY-SA 3.0
2015-09-21T12:13:56.670
16818
2015-09-22T05:50:05.760
question
angularjs material-design
MDLのmdl-textfield__errorを使ってバリデーションチェックしたら表示されない


自己解決しました。  
検証結果としてmdl-
textfield__errorはtextfieldの背景をバリデーションエラーの時に赤く染めるものであり、使い方の間違いでした。フォントを合わせたいだけならmdl-
typography--font-medium mdl-color-text--
redだけで良いです。その時、div要素は別にしてあげないと、flotingのアニメがずれます。なので、バリデーションかました時はinput要素にmdl-
textfield__error使ってあげると良いと思います。


CC BY-SA 3.0
2015-09-21T14:23:13.497
16823
2015-09-22T05:50:05.760
2015-09-22T05:50:05.760
16818
answer