javascript - validasi tipe input=number di angularjs

Saya sedang mencoba memvalidasi < input type=number > dengan menggunakan direktif input [number] dari modul ng di AngularJS.

Saat menggunakan input dengan tipe number, dengan atribut max (atau min) diatur ke angka seperti

<input type=number min="20" max="40">

Itu berfungsi dengan baik, tetapi data min dan max saya datang secara dinamis menggunakan ng-repeat seperti

<input type=number min="configRow.valueStart" max="configRow.valueEnd"> , lalu itu tidak berfungsi.

Saya tahu bahwa min dan max hanya menerima angka dan saya tidak terlalu pandai menulis direktif untuk itu, Tolong bantu saya, direktori seperti itu atau saran apapun akan sangat dihargai.

Jawaban #1

min dan max mengharapkan sebuah nilai. Jadi, ini seharusnya bekerja:

<input type=number min="{{configRow.valueStart}}" max="{{configRow.valueEnd}}">

Berikut adalah plunker yang menunjukkan demo. (ini hanya modifikasi dari demo dokumentasi).

Saat ini, sumber untuk atribut-atribut ini terlihat seperti di bawah. Jadi, Anda bisa melihat bahwa sebuah nilai diharapkan dan kemudian diubah menjadi float dengan parseFloat. Jadi menginterpolasi properti model {{}} ke nilai sangat diperlukan.

src/ng/directive/input.js

if (attr.min) {
        var minValidator = function(value) {
          var min = parseFloat(attr.min);
          return validate(ctrl, 'min', ctrl.$isEmpty(value) || value >= min, value);
        };

        ctrl.$parsers.push(minValidator);
        ctrl.$formatters.push(minValidator);
      }

      if (attr.max) {
        var maxValidator = function(value) {
          var max = parseFloat(attr.max);
          return validate(ctrl, 'max', ctrl.$isEmpty(value) || value <= max, value);
        };

        ctrl.$parsers.push(maxValidator);
        ctrl.$formatters.push(maxValidator);
      }

Jawaban #2

Panjang maksimum tidak akan bekerja dengan <input type="number", cara terbaik yang saya tahu adalah menggunakan event oninput untuk membatasi maxlength, ini adalah solusi umum yang bekerja dengan semua framework Javascript. Silakan lihat kode di bawah ini.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />T