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

404 Page Not Found

KULDEEP

1 year ago

2.2k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
InGen

Dennis Kamp

8 months ago

439
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Show user details

Lucas Martinez

3 years ago

26.3k
Invoice
Invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.5k
ztailwindsnippet01

Anonymous

3 months ago

224
Author Panels

Sherry Lynne

2 months ago

106
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

793
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

2 years ago

4.7k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

5 months ago

524