Angular input mã phiếu nhập kho

Thuc_Nguyen_tan · September 9, 2016, 2:27am

Mình cần làm một cái directive input để nhập mã phiếu, theo định dạng “PN0001”.

2 ký tự đầu là “PN”
4 ký tự sau là số
thì phải làm thế nào? nhờ mấy bạn giúp với

Hao · September 9, 2016, 2:11am

Người dùng có bắt buộc phải nhập chữ PN không? Nếu không thì có thể làm như vậy cho đơn giản: https://jsfiddle.net/90fpjenp/1/ Người dùng chỉ phải nhập phần số thôi
hoặc có thể dùng plugin này: https://igorescobar.github.io/jQuery-Mask-Plugin/
Plugin có hỗ trợ tạo ra format riêng, ví dụ:

$('.your-field').mask('AA/SS/YYYY', {'translation': {
                                        A: {pattern: /[A-Za-z0-9]/},
                                        S: {pattern: /[A-Za-z]/},
                                        Y: {pattern: /[0-9]/}
                                      }
                                });

Thuc_Nguyen_tan · September 9, 2016, 2:35am

thank you, cái jQuery-Mask-Plugin rất giá trị, nhưng hình như nó chưa validation thì phải.

Hao · September 9, 2016, 2:41am

ý bạn là validation gì?

Thuc_Nguyen_tan · September 9, 2016, 2:43am

Tức là kiểm tra tính hợp lệ trước khi post,

Hao · September 9, 2016, 2:44am

Plugin hỗ trợ format cái data khi nhập vào thôi. Còn format đó có hợp lệ hay không thì mình phải tự viết thêm

Thuc_Nguyen_tan · September 9, 2016, 5:34am

Làm thử một cái theo Angular style thử đi bạn xem như mài kiếm ok?

Ví dụ Qui định là : “PX0001”
Version 1:
Khi user gõ vào nếu đúng thì do notthing, còn nếu sai pattern thì show error báo format phải là “PX0001”, và dĩ nhiên không cho post nếu không đúng pattern

Bổ sung : Cho định nghĩa pattern

Version 2:
giống V1 nhưng nâng cấp một cái là hiện cái format trong khu vực input luôn : “PX____”

Version 3 : chưa nghĩ ra…

…
hix tự đặt yêu cầu cho chính mình!!!

để lát mình post cái v1 rồi bạn tối ưu hóa giúp mình nhé

Hao · September 9, 2016, 2:55am

Mình sẽ thử (thêm text cho đủ 20 chữ)

son0nine · September 9, 2016, 3:37am

Nếu là AngularJS thì dùng uimask đi, hỗ trợ thẳng cái Version2 của bạn luôn

nguyenhuuca · September 9, 2016, 5:14am

như dưới cũng được, tùy chỉnh theo ý mình

module.directive('format', [function () {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var symbol = "PX"; // dummy usage
            
            ctrl.$formatters.unshift(function (a) {
                return symbol + (ctrl.$modelValue) ;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^0-9]/g, '');
                elem.val(symbol + plainNumber);
                return plainNumber;
            });
        }
    };
}]);

 <input type="text" ng-model="test" format/>

Thuc_Nguyen_tan · September 9, 2016, 5:33am

của mình đây
http://plnkr.co/edit/THJvl2?p=preview

Của bạn sao gọn vậy ta!!!

Cái của mình là ok cho version 1 rồi nghen;

Thực sự mình cũng chưa hiểu push and unshift khác nhau thế nào??

Mình có thêm biến vào cái regex được không nhỉ ?

Instead of using the /regex/g syntax, you can construct a new RegExp object:

var re = new RegExp(“regex”,“g”);

You can dynamically create regex objects this way. Then you will do:

“mystring”.replace(re, “newstring”);

Vậy mình sẽ thêm biến
var symbol=“PX”;
var soKySo=4;
sau này đẩy vào attr luôn.