@libs-ui/pipes-format-text-full-name-format

Pipe chuẩn hóa tên người: viết hoa chữ cái đầu mỗi từ, loại bỏ khoảng trắng thừa và emoji.

Giới thiệu

LibsUiPipesFormatTextFullNameFormatPipe là Angular pipe chuyên dụng để định dạng tên người về dạng chuẩn Title Case. Pipe tự động viết hoa chữ cái đầu mỗi từ, viết thường các ký tự còn lại, trim khoảng trắng đầu/cuối, xóa khoảng trắng thừa giữa các từ và loại bỏ emoji. Hoạt động đầy đủ với tiếng Việt có dấu unicode.

Tính năng

• ✅ Viết hoa chữ cái đầu mỗi từ (Title Case)
• ✅ Viết thường các ký tự còn lại trong mỗi từ
• ✅ Trim khoảng trắng đầu/cuối chuỗi
• ✅ Xóa khoảng trắng thừa giữa các từ
• ✅ Loại bỏ emoji tự động
• ✅ Hỗ trợ tiếng Việt có dấu unicode

Khi nào sử dụng

• Chuẩn hóa tên người dùng nhập vào từ form về dạng "Nguyễn Văn A"
• Hiển thị tên import từ file Excel/CSV thường ở dạng ALL CAPS hoặc lowercase
• Hiển thị tên trong danh sách, avatar, profile — đảm bảo format nhất quán
• Clean-up tên có khoảng trắng thừa hoặc chứa emoji không mong muốn

Cài đặt

npm install @libs-ui/pipes-format-text-full-name-format

Import

import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';

@Component({
  standalone: true,
  imports: [LibsUiPipesFormatTextFullNameFormatPipe],
})
export class ExampleComponent {}

Ví dụ sử dụng

Cơ bản — lowercase → Title Case

<p>{{ 'john doe' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
<!-- Output: John Doe -->

ALL CAPS → Title Case

<p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
<!-- Output: Nguyen Van A -->

Trim & xóa khoảng trắng thừa

<p>{{ '  TRAN   THI   B  ' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
<!-- Output: Tran Thi B -->

Loại bỏ emoji

<p>{{ 'le thu C 😀🎉' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
<!-- Output: Le Thu C -->

Tên tiếng Việt

<p>{{ 'phạm thị MỸ LINH' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
<!-- Output: Phạm Thị Mỹ Linh -->

Trong component TypeScript

import { Component } from '@angular/core';
import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [LibsUiPipesFormatTextFullNameFormatPipe],
  template: `
    <span>{{ user.fullName | LibsUiPipesFormatTextFullNameFormatPipe }}</span>
    <span>{{ importedName | LibsUiPipesFormatTextFullNameFormatPipe }}</span>
  `,
})
export class UserProfileComponent {
  user = { fullName: 'NGUYEN VAN A' };
  importedName = '  tran   thi   b  ';
}

Dùng hàm utils trong TypeScript (không cần inject pipe)

Pipe là thin wrapper của hàm fullNameFormat trong @libs-ui/utils. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó:

import { fullNameFormat } from '@libs-ui/utils';

const displayName = fullNameFormat('NGUYEN VAN A');
// Output: 'Nguyen Van A'

const cleaned = fullNameFormat('  le thi c 😀  ');
// Output: 'Le Thi C'

Transform

| Tham số | Type | Bắt buộc | Mô tả | Ví dụ | |---|---|---|---|---| | value | string | ✅ | Tên người cần định dạng | 'NGUYEN VAN A' |

Cú pháp template:

{{ value | LibsUiPipesFormatTextFullNameFormatPipe }}

Cú pháp standalone (trong TypeScript):

import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';

const pipe = new LibsUiPipesFormatTextFullNameFormatPipe();
const result = pipe.transform('NGUYEN VAN A');
// Output: 'Nguyen Van A'

Behavior với falsy input

| Input | Output | Ghi chú | |---|---|---| | null | null | Không throw error | | undefined | undefined | Không throw error | | '' | '' | Chuỗi rỗng trả về nguyên | | 'john doe' | 'John Doe' | lowercase → Title Case | | 'NGUYEN VAN A' | 'Nguyen Van A' | CAPS → Title Case | | ' TRAN THI B ' | 'Tran Thi B' | Trim + xóa khoảng trắng thừa | | 'le thu C 😀🎉' | 'Le Thu C' | Emoji bị loại bỏ | | 'phạm thị MỸ LINH' | 'Phạm Thị Mỹ Linh' | Tiếng Việt giữ nguyên dấu |

Logic bên trong

Pipe gọi hàm fullNameFormat() từ @libs-ui/utils với bộ options cố định:

// Nội bộ của pipe:
transform(value: string) {
  return fullNameFormat(value);
}

// Trong @libs-ui/utils:
export const fullNameFormat = (value: string) => {
  if (!value) return value;
  return capitalize(value, {
    lowercaseOtherCharacter: true,
    trim: true,
    removeMultipleSpace: true,
    removeEmoji: true,
  });
};

Lưu ý quan trọng

⚠️ Options cố định: Pipe đã hardcode lowercaseOtherCharacter=true, trim=true, removeMultipleSpace=true, removeEmoji=true. Không tùy chỉnh được qua tham số pipe.

⚠️ Cần tùy chỉnh options: Nếu cần giữ lại emoji hoặc điều chỉnh behavior, hãy dùng trực tiếp hàm capitalize() từ @libs-ui/utils thay vì pipe này.

⚠️ Falsy input an toàn: Input là null, undefined hoặc chuỗi rỗng sẽ được trả về nguyên giá trị đó mà không throw error.

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/pipes/format-text/full-name-format