ng-messages tidak menampilkan kesalahan validasi dengan benar

Saya telah membuat formulir dasar menggunakan bahan sudut dan ingin pesan kesalahan tertentu muncul ketika input tidak valid. Saya mencoba memodelkannya setelah contoh masukan di situs resmi, yang menggunakan direktif ng-messages untuk menampilkan kesalahan validasi. Apa pun alasannya, pesan kesalahan sepertinya hanya ditampilkan saat status validasi beralih dari valid ke tidak valid.

Misalnya ada input seperti <input type="email" required> dengan <ng-message when="email"> yang bertuliskan "Silakan masukkan email yang valid". Menulis email yang tidak valid dan kemudian beralih ke nilai berikutnya akan memicu validasi, gaya yang tidak valid diterapkan ke input dan pesan ditampilkan. Jika sebaliknya saya langsung melanjutkan ke input berikutnya tanpa memasukkan apa pun, elemen tersebut juga menerapkan gaya yang tidak valid (karena atribut required) dan tidak ada pesan yang muncul seperti yang diharapkan (saya tidak menyertakan satu untuk required). Namun jika saya memfokuskan input lagi dan menulis email yang tidak valid, pesan tersebut tidak muncul (meskipun saya memindahkan fokus ke belakang dan ke belakang). Namun elemen input masih memiliki gaya yang tidak valid. Pesan tersebut hanya muncul lagi ketika saya menulis email yang tidak valid (menyebabkan gaya yang tidak valid dihapus dari elemen) dan kemudian menghapusnya agar tidak valid lagi.

Berikut adalah contoh CodePen yang menunjukkan perilakunya, dan menampilkan nilai atribut formulir. Markupnya adalah:

<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 tidak lain adalah

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

Anda dapat melihat input divalidasi dengan benar, namun sepertinya elemen pesan tidak menerapkan gaya yang tepat (opacity: 1) padahal seharusnya.


angularjs angular-material ng-messages
person JaredL    schedule 19.01.2016    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

Anda menemui https://github.com/angular/material/issues/6443 .

Selain itu Anda kehilangan type="email" dan pesan untuk kesalahan 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>
person kuhnroyal    schedule 19.01.2016
comment
Ups, aslinya terbuat dari batu giok dan rupanya saya melewatkan beberapa hal saat menulis contoh. Masalah ini memang terlihat seperti yang saya alami, sayang sekali sepertinya tidak ada perbaikan. Karena saya mengabaikan kesalahan yang diperlukan (saya pikir gaya kesalahan yang diterapkan pada input kosong cukup jelas) Saya rasa saya hanya bisa menggunakan satu ng-if untuk pesan kesalahan khusus untuk saat ini. - person JaredL; 19.01.2016
comment
Anda dapat mencoba menggabungkan ng-show/hide dengan md-auto-hide="false" pada elemen ng-messages. Ada juga md-is-error="CONDITION" di md-input-container. - person kuhnroyal; 19.01.2016