Góc 2: Sử dụng ống với ngModel

Question

Tôi đã sử dụng JQuery inputmask ở một trong các biểu mẫu của tôi cùng với [(ngModel)], nhưng vì một số lý do chúng không hoạt động cùng nhau. Sử dụng một trong hai chính nó hoạt động hoàn toàn tốt đẹp, nhưng kết hợp hai hoàn toàn phá vỡ [(ngModel)] và đầu vào mới không được gửi trở lại thành phần. Sau khi đấu tranh với điều này trong một thời gian tôi đã tìm thấy bằng cách sử dụng ống Angular 2 sẽ là một giải pháp tốt, tuy nhiên tôi không thể tìm ra cách để có được hai làm việc với nhau hoặc.

Dưới đây là một số mã tôi đang sử dụng để thử nghiệm ống của tôi

<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off"> 
<p>Amount: {{Amount | number:'1.2-2'}}</p> 

Nếu tôi gõ vào 12345, thẻ <p> bên dưới sẽ hiển thị 12,345.00, đó là chính xác làm thế nào tôi muốn nó để lọc, nhưng tôi don' t muốn có số tiền được lọc bên dưới đầu vào, tôi muốn đầu vào chính nó để hiển thị 12,345.00. Thêm cùng một đường ống đó vào ngModel như thế này: [(ngModel)]="Amount | number:'1.2-2'" mang lại cho tôi lỗi sau.

Parser Error: Cannot have a pipe in an action expression at column 10 in [Amount | number:'1.2-2'=$event]

Làm cách nào để sử dụng ống (hoặc mặt nạ nhập) bên trong đầu vào với [(ngModel)]?

Answer 1

[(ngModel)] là viết tắt của [ngModel] và (ngModelChange). Nếu bạn tách chúng ra thì nó sẽ hoạt động (nó hoạt động chắc chắn với ống async):

[ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)"