Pertanyaan Tampilkan beberapa pesan untuk berbagai kolom formulir menggunakan ng-pesan


Apakah mungkin untuk menggunakan ng-pesan dengan sudut 1,3 dan menunjukkan ringkasan validasi di bagian atas dengan pesan kesalahan untuk berbagai bidang?

<div ng-messages="myForm.$error">
    <div ng-message="required">Need to show required error for field 1.</div>
    <div ng-message="required">Need to show required error for field 2.</div>
</div>

Bagaimana saya bisa mencapai ini? Semua contoh yang saya lihat sejauh ini menunjukkan pesan kesalahan untuk satu bidang, bukan untuk semua bidang dalam formulir.

Apakah saya perlu memiliki beberapa bagian ng-pesan untuk setiap bidang?


4
2018-04-03 04:29


asal


Jawaban:


Saya ingin menata seluruh ringkasan blok sebagai satu. Jadi saya akhirnya melakukan ini.

<div class="error-summary" ng-show="myForm.$submitted && myForm.$invalid">
    <p ng-show="myForm.field1.$error.required">Field 1 is required.</p>
    <p ng-show="myForm.field2.$error.required">Field 2 is required.</p>
</div>

Saya berharap untuk melakukan sesuatu yang mirip dengan menggunakan ng-pesan ini.


6
2018-04-03 13:54



Bagaimana dengan ini?

<div ng-messages="myForm.field1.$error">
    <div ng-message="required">Need to show required error for field 1</div>
</div>
<div ng-messages="myForm.field2.$error">
    <div ng-message="required">Need to show required error for field 2</div>
</div>
<div ng-messages="myForm.field3.$error">
    <div ng-message="required">Need to show required error for field 3</div>
</div>

3
2018-04-03 04:47



Ya, Anda harus memiliki banyak ng-messages. Silakan lihat tautan di bawah ini.

http://plnkr.co/edit/QgNkXKosgcArGZW7WuZO?p=preview

<form name="myForm">
  <label>Enter your name:</label>
  <br>
  <input type="text" name="myName1" ng-model="name1" required />
  <br>
  <input type="text" name="myName2" ng-model="name2" required />

  <div ng-messages="myForm.myName1.$error">
    <div ng-message="required">enter name 1</div>
  </div>
  <div ng-messages="myForm.myName2.$error">
    <div ng-message="required">enter name 2</div>
  </div>
</form>

1
2018-04-03 04:55