form2

This tailwind example is contributed by Anonymous, on 17-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 6

Fork Fullscreen

<!-- import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnChanges,
  SimpleChanges
} from '@angular/core';

import { CommonModule } from '@angular/common';

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

import {
  SchoolClassService,
  SchoolClassRequest,
  AcademicYearOption,
  GradeLevelOption
} from './school-class.service';

@Component({
  selector: 'app-school-class',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './school-class.component.html'
})
export class SchoolClassComponent implements OnChanges {
  @Input() isModalOpen = false;
  @Input() selectedId: number | null = null;

@Output() close = new EventEmitter<void>();
  @Output() saved = new EventEmitter<void>();

academicYears: AcademicYearOption[] = [];
  gradeLevels: GradeLevelOption[] = [];

classCode = '';
  isSaving = false;
  isLoading = false;
  serverError = '';

classForm = new FormGroup({
    academicYearId: new FormControl<number | null>(
      null,
      [Validators.required]
    ),

gradeLevelId: new FormControl<number | null>(
      null,
      [Validators.required]
    ),

section: new FormControl('', [
      Validators.required,
      Validators.maxLength(5)
    ]),

seatsAvailable: new FormControl<number | null>(
      1,
      [Validators.required, Validators.min(1)]
    ),

admissionFee: new FormControl<number | null>(
      0,
      [Validators.required, Validators.min(0)]
    ),

monthlyTuitionFee: new FormControl<number | null>(
      null,
      [Validators.required, Validators.min(0.01)]
    ),

transportFeeMonthly: new FormControl<number | null>(
      0,
      [Validators.min(0)]
    ),

status: new FormControl('Active', [
      Validators.required
    ])
  });

constructor(
    private schoolClassService: SchoolClassService
  ) {}

ngOnChanges(changes: SimpleChanges): void {
    if (changes['isModalOpen'] && this.isModalOpen) {
      this.loadForm();
    }

if (
      changes['selectedId'] &&
      this.isModalOpen &&
      !changes['isModalOpen']
    ) {
      this.loadForm();
    }
  }

loadForm(): void {
    this.serverError = '';
    this.classCode = '';

this.classForm.reset({
      academicYearId: null,
      gradeLevelId: null,
      section: '',
      seatsAvailable: 1,
      admissionFee: 0,
      monthlyTuitionFee: null,
      transportFeeMonthly: 0,
      status: 'Active'
    });

this.loadDropdowns();

if (this.selectedId === null) {
      return;
    }

this.isLoading = true;

this.schoolClassService.getById(this.selectedId).subscribe({
      next: (schoolClass) => {
        this.classCode = schoolClass.classCode;

this.classForm.patchValue({
          academicYearId: schoolClass.academicYearId,
          gradeLevelId: schoolClass.gradeLevelId,
          section: schoolClass.section,
          seatsAvailable: schoolClass.seatsAvailable,
          admissionFee: schoolClass.admissionFee,
          monthlyTuitionFee: schoolClass.monthlyTuitionFee,
          transportFeeMonthly: schoolClass.transportFeeMonthly,
          status: schoolClass.status
        });

this.isLoading = false;
      },
      error: (error) => {
        this.serverError =
          error?.error?.message || 'Unable to load class details.';
        this.isLoading = false;
      }
    });
  }

loadDropdowns(): void {
    this.schoolClassService.getAcademicYears().subscribe({
      next: (data) => {
        this.academicYears = data;
      },
      error: () => {
        this.serverError = 'Unable to load academic years.';
      }
    });

this.schoolClassService.getGradeLevels().subscribe({
      next: (data) => {
        this.gradeLevels = data;
      },
      error: () => {
        this.serverError = 'Unable to load grade levels.';
      }
    });
  }

onSubmit(): void {
    if (this.classForm.invalid) {
      this.classForm.markAllAsTouched();
      return;
    }

const value = this.classForm.getRawValue();

const data: SchoolClassRequest = {
      academicYearId: value.academicYearId!,
      gradeLevelId: value.gradeLevelId!,
      section: value.section!.trim(),
      seatsAvailable: value.seatsAvailable!,
      admissionFee: value.admissionFee!,
      monthlyTuitionFee: value.monthlyTuitionFee!,
      transportFeeMonthly: value.transportFeeMonthly ?? 0,
      status: value.status!
    };

this.isSaving = true;
    this.serverError = '';

const request = this.selectedId !== null
      ? this.schoolClassService.update(this.selectedId, data)
      : this.schoolClassService.create(data);

request.subscribe({
      next: () => {
        this.isSaving = false;
        this.saved.emit();
      },
      error: (error) => {
        this.serverError =
          error?.error?.message || 'Unable to save class details.';
        this.isSaving = false;
      }
    });
  }

onClose(): void {
    if (!this.isSaving) {
      this.close.emit();
    }
  }
} -->

<div class="flex items-center justify-between px-6 py-4 border-b">
      <div>
        <h2 class="text-xl font-semibold text-gray-800">
          @if (selectedId === null) {
            Add Class
          } @else {
            Edit Class
          }
        </h2>

<p class="text-sm text-gray-500 mt-1">
          @if (selectedId === null) {
            Add a new class and fee structure
          } @else {
            Update class and fee details
          }
        </p>
      </div>

<button
        type="button"
        (click)="onClose()"
        class="text-2xl text-gray-500 hover:text-gray-800">
        &times;
      </button>
    </div>

@if (serverError) {
      <div class="mx-6 mt-4 p-3 rounded bg-red-50 text-red-600 text-sm">
        {{ serverError }}
      </div>
    }

@if (isLoading) {
      <p class="p-6 text-gray-500">Loading class details...</p>
    } @else {
      <form
        [formGroup]="classForm"
        (ngSubmit)="onSubmit()"
        novalidate
        class="p-6">

@if (selectedId !== null) {
          <div class="mb-5">
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Class Code
            </label>

<input
              type="text"
              [value]="classCode"
              readonly
              class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 text-gray-500" />
          </div>
        } @else {
          <p class="text-sm text-gray-500 mb-5">
            Class code will be generated automatically.
          </p>
        }

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Academic Year
            </label>

<select
              formControlName="academicYearId"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
              <option [ngValue]="null">Select Academic Year</option>

@for (year of academicYears; track year.id) {
                <option [ngValue]="year.id">
                  {{ year.yearLabel }}
                </option>
              }
            </select>

@if (classForm.controls.academicYearId.touched &&
                 classForm.controls.academicYearId.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Academic year is required.
              </p>
            }
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Grade Level
            </label>

<select
              formControlName="gradeLevelId"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
              <option [ngValue]="null">Select Grade Level</option>

@for (grade of gradeLevels; track grade.id) {
                <option [ngValue]="grade.id">
                  {{ grade.name }}
                </option>
              }
            </select>

@if (classForm.controls.gradeLevelId.touched &&
                 classForm.controls.gradeLevelId.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Grade level is required.
              </p>
            }
          </div>
        </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Section
            </label>

@if (classForm.controls.section.touched &&
                 classForm.controls.section.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Section is required.
              </p>
            }

@if (classForm.controls.section.touched &&
                 classForm.controls.section.hasError('maxlength')) {
              <p class="text-red-500 text-sm mt-1">
                Maximum 5 characters allowed.
              </p>
            }
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Seats Available
            </label>

@if (classForm.controls.seatsAvailable.touched &&
                 classForm.controls.seatsAvailable.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Seats available is required.
              </p>
            }

@if (classForm.controls.seatsAvailable.touched &&
                 classForm.controls.seatsAvailable.hasError('min')) {
              <p class="text-red-500 text-sm mt-1">
                At least 1 seat is required.
              </p>
            }
          </div>
        </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Admission Fee
            </label>

@if (classForm.controls.admissionFee.touched &&
                 classForm.controls.admissionFee.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Admission fee is required.
              </p>
            }

@if (classForm.controls.admissionFee.touched &&
                 classForm.controls.admissionFee.hasError('min')) {
              <p class="text-red-500 text-sm mt-1">
                Admission fee cannot be negative.
              </p>
            }
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Monthly Tuition Fee
            </label>

@if (classForm.controls.monthlyTuitionFee.touched &&
                 classForm.controls.monthlyTuitionFee.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Monthly tuition fee is required.
              </p>
            }

@if (classForm.controls.monthlyTuitionFee.touched &&
                 classForm.controls.monthlyTuitionFee.hasError('min')) {
              <p class="text-red-500 text-sm mt-1">
                Monthly tuition fee must be greater than 0.
              </p>
            }
          </div>
        </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Monthly Transport Fee (Optional)
            </label>

@if (classForm.controls.transportFeeMonthly.touched &&
                 classForm.controls.transportFeeMonthly.hasError('min')) {
              <p class="text-red-500 text-sm mt-1">
                Transport fee cannot be negative.
              </p>
            }
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Status
            </label>

<select
              formControlName="status"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
              <option value="Active">Active</option>
              <option value="Inactive">Inactive</option>
            </select>

@if (classForm.controls.status.touched &&
                 classForm.controls.status.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Status is required.
              </p>
            }
          </div>
        </div>

<div class="flex justify-end gap-3 pt-4 border-t">
          <button
            type="button"
            (click)="onClose()"
            [disabled]="isSaving"
            class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
            Cancel
          </button>

<button
            type="submit"
            [disabled]="classForm.invalid || isSaving"
            class="px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed">
            @if (isSaving) {
              Saving...
            } @else if (selectedId === null) {
              Add Class
            } @else {
              Update Class
            }
          </button>
        </div>
      </form>
    }
  </div>
</div>

Related Examples

Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

2.9k
Coffee Menu

ariaw

1 year ago

928
super admin
super admin

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.2k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

759
dashboard1

John

1 week ago

6
Heading Style

KULDEEP

1 year ago

765
Heading

KULDEEP

1 year ago

1.6k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2.1k
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.3k
Irish Destination
For Irish road signs Destination

Allynn Alvarico

6 months ago

311