1

角度のある素材を使用して基本的なフォームを作成しましたが、入力が無効な場合に特定のエラー メッセージが表示されるようにしたいと考えています。ディレクティブを使用して検証エラーを表示する公式 Web サイトの入力例をモデルにしてみました。ng-messages何らかの理由で、エラー メッセージは、検証状態が有効から無効に移行したときにのみ表示されるようです。

例えば、「有効なメールアドレスを入力してください」というよう<input type="email" required>な入力があります。<ng-message when="email">無効なメールを書いてから次の値にタブ移動すると、検証がトリガーされ、無効なスタイルが入力に適用され、メッセージが表示されます。代わりに、何も入力せずにすぐに次の入力に進むと、(required属性のために) 要素にも無効なスタイルが適用され、期待どおりにメッセージが表示されません (required）。しかし、もう一度入力にフォーカスして無効なメールを書いた場合、メッセージは表示されません (フォーカスを移動したり元に戻したりしても)。ただし、入力要素にはまだ無効なスタイルが適用されています。このメッセージは、無効なメールを書き (無効なスタイルが要素から削除される)、削除して再度無効にした場合にのみ再び表示されます。

これは、彼の動作を示し、フォーム属性の値を表示する CodePen の例です。マークアップは次のとおりです。

<div ng-app="TestApp" layout="row" layout-align="center">
    <div class="md-whiteframe-6dp md-margin" layout="column" flex="33">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h3>Sign Up</h3>
            </div>
        </md-toolbar>
        <md-content class="md-padding">
            <form name="signupForm" class="md-inline-form">
                <div layout-gt-xs="row">
                    <md-input-container flex>
                        <label>Username</label>
                        <input name="username" ng-model="user.username" required ng-minlength="6" autofocus/>
                        <ng-messages for="signupForm.username.$error">
                            <ng-message when="minlength">
                                Username must be at least 6 characters
                            </ng-message>
                        </ng-messages>
                    </ng-input-container>
                </div>
                <div layout-gt-xs="row">
                    <md-input-container flex>
                        <label>Email</label>
                        <input type="email" name="email" ng-model="user.email" required/>
                        <ng-messages for="signupForm.email.$error">
                            <ng-message when="email">
                                Please give a valid email
                            </ng-message>
                        </ng-messages>
                    </ng-input-container>
                </div>
                <div layout="column" layout-gt-xs="row" layout-align="center">
                    <md-button type="submit" class="md-raised md-primary">
                        Register
                    </md-button>
                    <md-button type="button" class="md-primary">
                        Back to sign in
                    </md-button>
                </div>
            </form>
        </md-content>
    </div>
</div>

JavaScriptはただの

angular.module("TestApp", ["ngMaterial", "ngMessages"]);

入力が正しく検証されていることがわかりますが、メッセージ要素に適切なスタイルが適用されていないようです ( opacity: 1)。

4

1 に答える 1

2

https://github.com/angular/material/issues/6443に遭遇しています。

それに加えて、エラーのtype="email"および メッセージがありません。required

<input name="email" ng-model="user.email" type="email" required/>
<ng-messages for="signupForm.username.$error">
    <ng-message when="email">
        Please give a valid email
    </ng-message>
    <ng-message when="required">
        Email is required
    </ng-message>
</ng-messages>
于 2016-01-19T10:56:18.957 に答える