2

入力の長さが50文字を超える場合、ブートストラップのクラス「has-error」を追加したい次のdivがあります。これはHTMLです：

<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">

    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control" id="inputTitulo" 
           maxlength="50" ng-maxlength="50" ng-model="formData.titulo">

</div>

どうすればこれを機能させることができますか？50 文字に達すると、ng-maxlength は $error オブジェクトのようなエラーをスローすると思いますが、オブジェクトが何であるか、アクセスする方法、およびコントローラーまたはディレクティブでさらに作業を行う必要があるかどうかについての手がかりがありません.

ここで何か助けはありますか？この問題と Angular バリデーターに関する「簡単な」情報が見つかりません。

編集1：

私はあなたのすべての回答を見て、あなたのおかげで何か新しいことを学びましたが、これはまだうまくいきません. 現在は次のようになっています。

  <div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control"  id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
  </div>

あなたの一人が提案したように、長さを直接チェックすることもテストしました。しかし、これらの解決策はどれも機能していないようです: has-error クラスを追加することはありません。なんで？

4

3 に答える 3

3

スコープでエラーを公開するには、formディレクティブが必要です。

<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
  <input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>

name(上記では、入力の属性を使用してフォーム データを公開していることに注意してください。実際にはngModelController、スコープ上で)

したがって、上記は機能し、フォームの検証を行う場合に適しています。ただし、入力の長さだけを確認する必要がある場合は、フォーム検証を使用する必要はありません。モデルを直接確認するだけで済みます。

<div ng-class="{'has-error': formData.foo.length > 50}>
  <input ng-model="formData.foo">
</div>
于 2015-08-07T17:37:26.250 に答える
0

ng-model を使用して検証を行っているため、このクラスng-invalidが入力ドキュメントに追加されます: https://docs.angularjs.org/api/ng/directive/ngModel

$error を使用するには、 ng-model ではなくフォームと名前を使用してアクセスする必要があり、ng-class は $error のみではなく $error.maxlength にバインドする必要があります

チュートリアル: https://scotch.io/tutorials/angularjs-form-validation

于 2015-08-07T17:36:02.950 に答える