radio-selection-input

v15.0.5

Published

4 months ago

This is an Angular Module containing Components/Services using Material

0High
0Medium
0Low

wavecoders

Radio Selection Input Component

Overview

The radio-selection-input library provides a Material Design radio button selection component that allows users to select exactly one option from a mutually exclusive set of choices. It supports both string and object data formats, implements ControlValueAccessor for seamless form integration, and provides native Angular validation system compatibility.

Core Capabilities

🔘 Radio Button Selection Interface

Exclusive Selection: Only one option can be selected at a time (radio button behavior)
Form Control Integration: Implements ControlValueAccessor for reactive forms
Flexible Data Support: Handles both string arrays and complex object arrays
Material Design: Built on Angular Material radio button foundation
Validation Support: Native Angular validation system compatibility
Label Configuration: Customizable labels and placeholders
Disabled State Support: Mark individual options as non-selectable
Pre-selection: Initialize with a selected option

🔧 Features

✅ ControlValueAccessor Implementation - Works with Angular forms
✅ Material Design Integration - Uses Angular Material components
✅ Exclusive Selection - Single selection from mutually exclusive options
✅ Flexible Data Types - Support for strings and objects
✅ Form Validation - Native validation integration
✅ Customizable Labels - Configurable display labels
✅ Disabled Options - Mark individual options as non-selectable
✅ Pre-selection - Initialize with selected option
✅ Required Validation - Ensure selection is made

Key Benefits

| Feature | Description | |---------|-------------| | Exclusive Selection | Ensures only one option can be selected | | Form Integration | Seamless Angular form control integration | | Data Format Support | Works with simple strings or complex objects | | Validation Ready | Built-in validation support | | Material Design | Consistent Material Design styling | | Accessibility | Full ARIA support and keyboard navigation |

Summary

The radio-selection-input library provides a traditional radio button selection component with comprehensive form integration and validation support, perfect for mutually exclusive selection scenarios in Angular applications.

Quick Start Guide

Installation & Setup (2 minutes)

1. Import Module

// app.module.ts
import { RadioSelectionInputModule } from 'radio-selection-input';

@NgModule({
  imports: [
    RadioSelectionInputModule
  ]
})
export class AppModule { }

2. No Module Configuration Required

The RadioSelectionInputModule does not require global configuration. Components can be used immediately after module import.

Quick Examples

Example 1: Basic String Array Selection

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-basic-radio',
  template: `
    <app-radio-selection-input
      [formControl]="selectionControl"
      [data]="paymentMethods"
      label="Payment Method"
      placeholder="Choose payment method">
    </app-radio-selection-input>
    
    <div>Selected: {{ selectionControl.value }}</div>
  `
})
export class BasicRadioComponent {
  selectionControl = new FormControl();
  
  paymentMethods = [
    'Credit Card', 'Debit Card', 'PayPal', 'Bank Transfer', 'Cash on Delivery'
  ];
}

Example 2: Object Array Selection

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-object-radio',
  template: `
    <app-radio-selection-input
      [formControl]="userControl"
      [data]="userOptions"
      label="Select User"
      placeholder="Choose a user"
      displayField="label">
    </app-radio-selection-input>
    
    <div *ngIf="userControl.value" class="user-info">
      <h4>{{ userControl.value.label }}</h4>
      <p>{{ userControl.value.email }}</p>
      <p>Role: {{ userControl.value.role }}</p>
    </div>
  `,
  styles: [`
    .user-info {
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: #f9f9f9;
    }
    .user-info h4 {
      margin: 0 0 0.5rem 0;
      color: #333;
    }
    .user-info p {
      margin: 0.25rem 0;
      font-size: 0.9rem;
      color: #666;
    }
  `]
})
export class ObjectRadioComponent {
  userControl = new FormControl();
  
  userOptions = [
    { value: 'user1', label: 'John Doe', email: '[email protected]', role: 'Admin' },
    { value: 'user2', label: 'Jane Smith', email: '[email protected]', role: 'Editor' },
    { value: 'user3', label: 'Bob Johnson', email: '[email protected]', role: 'Viewer' },
    { value: 'user4', label: 'Alice Brown', email: '[email protected]', role: 'Editor' }
  ];
}

Example 3: Required Selection with Validation

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-required-radio',
  template: `
    <app-radio-selection-input
      [formControl]="sizeControl"
      [data]="shirtSizes"
      label="Shirt Size"
      placeholder="Select your shirt size"
      [required]="true">
    </app-radio-selection-input>
    
    <div class="errors" *ngIf="sizeControl.errors && sizeControl.touched">
      <div *ngIf="sizeControl.hasError('required')">
        Shirt size selection is required
      </div>
    </div>
    
    <div>Selected Size: {{ sizeControl.value }}</div>
  `,
  styles: [`
    .errors {
      color: #f44336;
      font-size: 0.875rem;
      margin-top: 0.5rem;
    }
  `]
})
export class RequiredRadioComponent {
  sizeControl = new FormControl('', Validators.required);
  
  shirtSizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
}

Example 4: Radio Group with Pre-selection

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-pre-selected-radio',
  template: `
    <app-radio-selection-input
      [formControl]="themeControl"
      [data]="themeOptions"
      label="Theme Preference"
      placeholder="Choose a theme">
    </app-radio-selection-input>
    
    <div class="theme-preview" [attr.data-theme]="themeControl.value">
      <h4>Theme Preview</h4>
      <p>This is how your selected theme would look.</p>
      <button class="sample-button">Sample Button</button>
    </div>
  `,
  styles: [`
    .theme-preview {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    .theme-preview[data-theme="light"] {
      background: #ffffff;
      color: #333333;
      border: 1px solid #e0e0e0;
    }
    .theme-preview[data-theme="dark"] {
      background: #333333;
      color: #ffffff;
      border: 1px solid #555555;
    }
    .theme-preview[data-theme="auto"] {
      background: #f5f5f5;
      color: #666666;
      border: 1px solid #d0d0d0;
    }
    .sample-button {
      margin-top: 0.5rem;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .theme-preview[data-theme="light"] .sample-button {
      background: #2196f3;
      color: white;
    }
    .theme-preview[data-theme="dark"] .sample-button {
      background: #64b5f6;
      color: #333333;
    }
    .theme-preview[data-theme="auto"] .sample-button {
      background: #ff9800;
      color: white;
    }
  `]
})
export class PreSelectedRadioComponent {
  themeControl = new FormControl('light');
  
  themeOptions = [
    { value: 'light', label: 'Light Theme', description: 'Bright and clean' },
    { value: 'dark', label: 'Dark Theme', description: 'Easy on the eyes' },
    { value: 'auto', label: 'Auto', description: 'Follow system preference' }
  ];
}

Example 5: Form Integration with Dynamic Options

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-radio-form',
  template: `
    <form [formGroup]="dynamicForm">
      <app-radio-selection-input
        formControlName="plan"
        [data]="subscriptionPlans"
        label="Subscription Plan"
        placeholder="Select a plan"
        [required]="true">
      </app-radio-selection-input>
      
      <app-radio-selection-input
        formControlName="billingCycle"
        [data]="billingCycles"
        label="Billing Cycle"
        placeholder="Choose billing frequency"
        [required]="true">
      </app-radio-selection-input>
    </form>
    
    <div class="form-status">
      <div>Form Valid: {{ dynamicForm.valid }}</div>
      <div>Plan: {{ dynamicForm.get('plan')?.value }}</div>
      <div>Billing: {{ dynamicForm.get('billingCycle')?.value }}</div>
    </div>
    
    <div class="summary" *ngIf="dynamicForm.valid">
      <h4>Subscription Summary</h4>
      <p><strong>Plan:</strong> {{ getPlanDetails(dynamicForm.get('plan')?.value)?.name }}</p>
      <p><strong>Billing:</strong> {{ getPlanDetails(dynamicForm.get('plan')?.value)?.billing }}</p>
      <p><strong>Price:</strong> ${{ getPlanPrice(dynamicForm.get('plan')?.value, dynamicForm.get('billingCycle')?.value) }}/month</p>
    </div>
    
    <div class="controls">
      <button (click)="selectPopularPlan()">Select Popular Plan</button>
      <button (click)="resetForm()">Reset</button>
      <button (click)="submitForm()" [disabled]="dynamicForm.invalid">Subscribe</button>
    </div>
  `,
  styles: [`
    form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-width: 400px;
    }
    .form-status {
      margin-top: 1rem;
      padding: 1rem;
      background: #f5f5f5;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.9rem;
    }
    .summary {
      margin-top: 1rem;
      padding: 1rem;
      border: 2px solid #4caf50;
      border-radius: 8px;
      background: #f1f8e9;
    }
    .summary h4 {
      margin: 0 0 0.5rem 0;
      color: #2e7d32;
    }
    .summary p {
      margin: 0.25rem 0;
      color: #388e3c;
    }
    .controls {
      margin-top: 1rem;
      display: flex;
      gap: 0.5rem;
    }
    button {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: white;
      cursor: pointer;
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  `]
})
export class DynamicRadioFormComponent {
  dynamicForm: FormGroup;
  
  subscriptionPlans = [
    { value: 'basic', name: 'Basic Plan', price: 9.99, billing: 'Monthly' },
    { value: 'pro', name: 'Pro Plan', price: 19.99, billing: 'Monthly' },
    { value: 'enterprise', name: 'Enterprise Plan', price: 49.99, billing: 'Monthly' }
  ];
  
  billingCycles = ['Monthly', 'Quarterly', 'Yearly'];

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      plan: ['', Validators.required],
      billingCycle: ['', Validators.required]
    });
  }

  getPlanDetails(planValue: string) {
    return this.subscriptionPlans.find(plan => plan.value === planValue);
  }

  getPlanPrice(planValue: string, billingCycle: string) {
    const plan = this.getPlanDetails(planValue);
    if (!plan) return 0;
    
    const multipliers = {
      'Monthly': 1,
      'Quarterly': 0.9,  // 10% discount
      'Yearly': 0.8     // 20% discount
    };
    
    return (plan.price * (multipliers[billingCycle as keyof typeof multipliers] || 1)).toFixed(2);
  }

  selectPopularPlan() {
    this.dynamicForm.patchValue({
      plan: 'pro',
      billingCycle: 'Yearly'
    });
  }

  resetForm() {
    this.dynamicForm.reset();
  }

  submitForm() {
    if (this.dynamicForm.valid) {
      console.log('Subscription form submitted:', this.dynamicForm.value);
      alert('Subscription created successfully!');
    }
  }
}

Component API

Inputs

Outputs

| Output | Type | Description | |--------|------|-------------| | selectionChange | EventEmitter<any> | Emits selected value when selection changes |

Form Integration (ControlValueAccessor)

The component implements Angular's ControlValueAccessor interface for seamless form integration.

ControlValueAccessor Implementation

// writeValue(value: any): void
// Sets the selected value
writeValue(value: any): void {
  this.selectedValue = value;
}

// registerOnChange(fn: any): void
// Registers a callback for value changes
registerOnChange(fn: any): void {
  this.onChange = fn;
}

// registerOnTouched(fn: any): void
// Registers a callback for touch events
registerOnTouched(fn: any): void {
  this.onTouch = fn;
}

// setDisabledState(isDisabled: boolean): void
// Sets disabled state
setDisabledState?(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

Form Integration Examples

Reactive Forms

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-radio-form',
  template: `
    <form [formGroup]="radioForm">
      <app-radio-selection-input
        formControlName="gender"
        [data]="genderOptions"
        label="Gender"
        placeholder="Select gender"
        [required]="true">
      </app-radio-selection-input>
      
      <app-radio-selection-input
        formControlName="preferredContact"
        [data]="contactOptions"
        label="Preferred Contact Method"
        placeholder="Choose contact method">
      </app-radio-selection-input>
    </form>
  `
})
export class ReactiveRadioFormComponent {
  radioForm = new FormGroup({
    gender: new FormControl('', Validators.required),
    preferredContact: new FormControl('')
  });
  
  genderOptions = ['Male', 'Female', 'Other', 'Prefer not to say'];
  contactOptions = ['Email', 'Phone', 'SMS', 'Mail'];
}

Template-Driven Forms

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-radio-form',
  template: `
    <app-radio-selection-input
      [(ngModel)]="selectedOption"
      name="templateRadio"
      [data]="templateOptions"
      label="Template Radio Selection"
      placeholder="Choose an option"
      required>
    </app-radio-selection-input>
    
    <div *ngIf="selectedOption">
      Selected: {{ selectedOption }}
    </div>
  `
})
export class TemplateRadioFormComponent {
  selectedOption = '';
  
  templateOptions = ['Option A', 'Option B', 'Option C', 'Option D'];
}

Model Structures

Radio Option Interface

export interface RadioOptionInterface {
  value: any;           // The value to be selected/returned
  label?: string;       // Optional display label
  disabled?: boolean;   // Whether this option is disabled
  selected?: boolean;   // Whether this option is pre-selected
  description?: string; // Optional description text
}

Radio Option Class

export class RadioOption implements RadioOptionInterface {
  constructor(
    public value: any,
    public label?: string,
    public disabled?: boolean = false,
    public selected?: boolean = false,
    public description?: string,
  ) {}

  static adapt(item?: any): RadioOption {
    return new RadioOption(
      item?.value ?? item,
      item?.label,
      item?.disabled || false,
      item?.selected || false,
      item?.description,
    );
  }
}

Usage Examples

// String array data (automatically converted)
const stringData = ['Option 1', 'Option 2', 'Option 3'];

// Object array data
const objectData = [
  { value: 'opt1', label: 'Option 1', disabled: false, selected: false, description: 'First option' },
  { value: 'opt2', label: 'Option 2', disabled: true, selected: false, description: 'Second option (disabled)' },
  { value: 'opt3', label: 'Option 3', disabled: false, selected: true, description: 'Third option (pre-selected)' }
];

// Manual RadioOption creation
const manualOptions = [
  new RadioOption('value1', 'Label 1', false, false, 'Description 1'),
  new RadioOption('value2', 'Label 2', true, false, 'Description 2'),
  new RadioOption('value3', 'Label 3', false, true, 'Description 3')
];

// Using adapt method for flexible data
const adaptedOptions = [
  RadioOption.adapt({ value: 'item1', label: 'Item 1', selected: true }),
  RadioOption.adapt({ value: 'item2', label: 'Item 2', disabled: true }),
  RadioOption.adapt('item3') // String fallback
];

Validation System

Built-in Validation

The component supports Angular's validation system:

Required Validation

// Marks field as required
[required]="true"   // Selection must be made

Custom Validators

// Add custom validation logic
const customForm = new FormGroup({
  selection: new FormControl('', [
    Validators.required,
    customValidator
  ])
});

// Custom validator example
function customValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (value === 'blocked-option') {
    return { blockedOption: true };
  }
  return null;
}

Validation Error Types

| Error Type | Condition | Description | |------------|-----------|-------------| | required | Control has required validator and no selection | Control is required but empty | | custom | Custom validation logic fails | User-defined validation errors |

Module Configuration