Reusable Field Components

This document explains how to use the reusable field components created for consistent UI across different data types.

Overview

We've created a set of reusable Angular components for different field types:

Text Field
Number Field
Phone Number Field
Paragraph Field
Password Field
Textarea Field

Each component follows the same pattern and uses ThemeService for consistent styling.

Field Configuration

All field components use a common FieldConfig interface:

interface FieldConfig {
  name: string;           // Unique field name
  label: string;          // Display label
  type: string;           // Field type (text, number, phone, etc.)
  required?: boolean;     // Is field required?
  placeholder?: string;   // Placeholder text
  description?: string;   // Helper text
  // Additional type-specific properties
}

Component Usage

1. Text Field

<app-text-field 
  [field]="{ name: 'username', label: 'Username', type: 'text', required: true }"
  [value]="formData.username"
  (valueChange)="formData.username = $event">
</app-text-field>

2. Number Field

<app-number-field 
  [field]="{ name: 'age', label: 'Age', type: 'number', min: 0, max: 120 }"
  [value]="formData.age"
  (valueChange)="formData.age = $event">
</app-number-field>

3. Phone Field

<app-phone-field 
  [field]="{ name: 'phone', label: 'Phone Number', type: 'phone', pattern: '^\\+?[1-9]\\d{1,14}$' }"
  [value]="formData.phone"
  (valueChange)="formData.phone = $event">
</app-phone-field>

4. Paragraph Field

<app-paragraph-field 
  [field]="{ name: 'description', label: 'Description', type: 'paragraph', rows: 6, showCharacterCount: true }"
  [value]="formData.description"
  (valueChange)="formData.description = $event">
</app-paragraph-field>

5. Password Field

<app-password-field 
  [field]="{ name: 'password', label: 'Password', type: 'password', showStrengthIndicator: true }"
  [value]="formData.password"
  (valueChange)="formData.password = $event">
</app-password-field>

6. Textarea Field

<app-textarea-field 
  [field]="{ name: 'comments', label: 'Comments', type: 'textarea', rows: 4 }"
  [value]="formData.comments"
  (valueChange)="formData.comments = $event">
</app-textarea-field>

Dynamic Form Component

For easier usage, we've created a DynamicFormComponent that can render multiple fields based on configuration:

<app-dynamic-form
  [fields]="formFields"
  [formData]="formData"
  (formSubmit)="onSubmit($event)"
  (formCancel)="onCancel()">
</app-dynamic-form>

In your component:

formFields = [
  { name: 'name', label: 'Name', type: 'text', required: true },
  { name: 'email', label: 'Email', type: 'text', required: true },
  { name: 'age', label: 'Age', type: 'number', min: 0 },
  { name: 'phone', label: 'Phone', type: 'phone' },
  { name: 'bio', label: 'Bio', type: 'paragraph' }
];

formData = {};

onSubmit(data) {
  console.log('Form submitted:', data);
  // Handle form submission
}

onCancel() {
  console.log('Form cancelled');
  // Handle form cancellation
}

Benefits of This Approach

Consistency: All fields follow the same styling and behavior patterns
Maintainability: Changes to one field type automatically apply everywhere
Reusability: Components can be used across different forms and modules
Extensibility: Easy to add new field types following the same pattern
Theme Support: All components use ThemeService for consistent theming
Validation: Built-in validation support for each field type
Accessibility: Proper labeling and ARIA attributes

Adding New Field Types

To add a new field type:

Create a new component that extends BaseFieldComponent
Implement the template and logic specific to that field type
Add the component to the FieldTypesModule
Register it in the FieldFactoryService
Update the documentation

Styling

All field components use the shared SCSS file which provides:

Consistent spacing and typography
ThemeService integration for colors
Responsive design patterns
Proper focus states and hover effects
Error state styling
Accessibility considerations

The styling follows the same patterns used in the UI enhancement rules we established earlier.

4.3 KiB Raw Blame History