CInputCurrency

Ô nhập tiền: người dùng thấy 1.234.567,89, còn model là số thuần. Dấu chấm ngăn nghìn, dấu phẩy thập phân theo quy ước Việt Nam.

Dùng khi: nhập số tiền — giá trị đơn hàng, hạn mức, chi phí.

Không dùng khi: số không phải tiền (số lượng, số ngày) — dùng CInputNumber; phần trăm — dùng CInputPercent.

<script setup lang="ts">
import { ref } from 'vue'
import { CFormItem } from '@tasco/ui'

// Ô nhập hiển thị 1.234.567,89 nhưng model là SỐ thuần — không phải chuỗi đã định dạng.
const amount = ref<number | null>(12_500_000)
</script>

<template>
  <div style="max-width: 320px">
    <CForm>
      <CFormItem label="Giá trị đơn hàng">
        <CInputCurrency v-model:value="amount" />
      </CFormItem>
    </CForm>

    <p style="margin: 0; color: var(--tasco-color-text-muted)">
      Giá trị gửi lên backend: <code>{{ amount === null ? 'null' : amount }}</code>
    </p>
  </div>
</template>

Giá trị

const amount = ref<number | null>(12_500_000)

Kiểu model	number | null — ô rỗng trả null, không phải 0
Người dùng thấy	12.500.000
Gửi lên backend	12500000

Vì model là số nên không cần quy đổi trước khi gửi API, và cũng đừng tự bỏ dấu chấm bằng tay ở tầng gọi API.

Định dạng lại được chuẩn hoá khi rời ô (blur): gõ dở 1.234, sẽ thành 1.234 sau khi rời ô.

Trong form

<CFormItem label="Giá trị đơn hàng" name="amount">
  <CInputCurrency v-model:value="model.amount" />
</CFormItem>

Rule bắt buộc vẫn dùng như ô thường; nhớ rằng ô rỗng là null:

const rules = {
  amount: [
    { required: true, message: 'Nhập giá trị đơn hàng' },
    { type: 'number', min: 1, message: 'Giá trị phải lớn hơn 0' },
  ],
}

API

Props

Tên	Kiểu	Mặc định	Mô tả
value	string | number | null	—	v-model:value — số tiền dạng number; ô nhập tự định dạng 1.234.567,89.

Sự kiện

Tên	Payload	Mô tả
update:value	[val: number | null]	v-model:value — số đã parse; ô rỗng trả `null`.
blur	[e: FocusEvent]	Rời khỏi ô nhập (sau khi đã định dạng lại giá trị).

Mọi thuộc tính khác của a-input (placeholder, disabled, size, addon-after…) được chuyển tiếp:

<CInputCurrency v-model:value="amount" placeholder="0" addon-after="₫" :disabled="readonly" />

Lưu ý

• Không đặt đơn vị vào trong ô; dùng addon-after="₫" hoặc nhãn của CFormItem.
• Ô không giới hạn số chữ số — cần chặn hạn mức thì kiểm bằng rule hoặc ở backend.
• Bảng hiển thị tiền thì định dạng bằng Intl.NumberFormat('vi-VN'), không dùng component nhập liệu chỉ để hiển thị.
• Số âm không nhập được (ô chỉ nhận chữ số và dấu phẩy) — số tiền âm thì thể hiện bằng loại giao dịch, đừng trông vào dấu trừ.

Liên quan

• CInputPercent — ô nhập phần trăm.
• CForm — form và rules.
• Trang form.