form1

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 8

Fork Fullscreen

<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 Academic Year
          } @else {
            Edit Academic Year
          }
        </h2>
        <p class="text-sm text-gray-500 mt-1">
          Manage academic year details
        </p>
      </div>

<button
        type="button"
        (click)="closeModal()"
        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 academic year...</p>
    } @else {
      <form
        [formGroup]="academicYearForm"
        (ngSubmit)="submitForm()"
        novalidate
        class="p-6">

@if (selectedId !== null) {
          <div class="mb-5">
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Academic Year Code
            </label>
            <input
              type="text"
              [value]="academicYearCode"
              readonly
              class="w-full px-3 py-2 border rounded-md bg-gray-100 text-gray-500" />
          </div>
        }

<div class="mb-5">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Year Label
          </label>
          <input
            type="text"
            formControlName="yearLabel"
            placeholder="2026-2027"
            class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500" />

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

@if (academicYearForm.controls.yearLabel.touched &&
               academicYearForm.controls.yearLabel.hasError('pattern')) {
            <p class="text-red-500 text-sm mt-1">
              Format must be YYYY-YYYY.
            </p>
          }

@if (academicYearForm.controls.yearLabel.touched &&
               academicYearForm.controls.yearLabel.hasError('invalidYearRange')) {
            <p class="text-red-500 text-sm mt-1">
              End year must be one year after start year.
            </p>
          }
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Start Date
            </label>
            <input
              type="date"
              formControlName="startDate"
              class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500" />

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

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

@if (academicYearForm.touched &&
             academicYearForm.hasError('endDateBeforeStart')) {
          <p class="text-red-500 text-sm -mt-3 mb-4">
            End date must be after start date.
          </p>
        }

<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Admission Window Open Date
            </label>
            <input
              type="date"
              formControlName="admissionWindowOpenDate"
              class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500" />

@if (academicYearForm.controls.admissionWindowOpenDate.touched &&
                 academicYearForm.controls.admissionWindowOpenDate.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Admission opening date is required.
              </p>
            }
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
              Admission Window Close Date
            </label>
            <input
              type="date"
              formControlName="admissionWindowCloseDate"
              class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500" />

@if (academicYearForm.controls.admissionWindowCloseDate.touched &&
                 academicYearForm.controls.admissionWindowCloseDate.hasError('required')) {
              <p class="text-red-500 text-sm mt-1">
                Admission closing date is required.
              </p>
            }
          </div>
        </div>

@if (academicYearForm.touched &&
             academicYearForm.hasError('admissionOpenOutOfRange')) {
          <p class="text-red-500 text-sm -mt-3 mb-4">
            Admission opening date must be within the academic year.
          </p>
        }

@if (academicYearForm.touched &&
             academicYearForm.hasError('admissionCloseNotAfterOpen')) {
          <p class="text-red-500 text-sm -mt-3 mb-4">
            Admission closing date must be after opening date.
          </p>
        }

@if (academicYearForm.touched &&
             academicYearForm.hasError('admissionCloseAfterEnd')) {
          <p class="text-red-500 text-sm -mt-3 mb-4">
            Admission closing date must be within the academic year.
          </p>
        }

<div class="mb-5">
          <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 rounded-md focus:ring-2 focus:ring-blue-500">
            <option value="Upcoming">Upcoming</option>
            <option value="Active">Active</option>
            <option value="Closed">Closed</option>
          </select>

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

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

<button
            type="submit"
            [disabled]="academicYearForm.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 Academic Year
            } @else {
              Update Academic Year
            }
          </button>
        </div>
      </form>
    }
  </div>
</div>

<!-- //academic year form

import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import {
  FormGroup,
  FormControl,
  Validators,
  AbstractControl,
  ValidationErrors,
  ValidatorFn,
  ReactiveFormsModule
} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AcademicYearService } from './academic-year.service';

const dateValidator: ValidatorFn = (
  control: AbstractControl
): ValidationErrors | null => {
  const start = control.get('startDate')?.value;
  const end = control.get('endDate')?.value;
  const open = control.get('admissionWindowOpenDate')?.value;
  const close = control.get('admissionWindowCloseDate')?.value;

const errors: ValidationErrors = {};

if (start && end && end <= start) {
    errors['endDateBeforeStart'] = true;
  }

if (start && end && open && (open < start || open > end)) {
    errors['admissionOpenOutOfRange'] = true;
  }

if (open && close && close <= open) {
    errors['admissionCloseNotAfterOpen'] = true;
  }

if (end && close && close > end) {
    errors['admissionCloseAfterEnd'] = true;
  }

return Object.keys(errors).length ? errors : null;
};

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

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

isSaving = false;
  isLoading = false;
  academicYearCode = '';
  serverError = '';

academicYearForm = new FormGroup({
    yearLabel: new FormControl('', [
      Validators.required,
      Validators.pattern(/^\d{4}-\d{4}$/),
      this.validateYearLabel
    ]),

startDate: new FormControl('', [
      Validators.required
    ]),

endDate: new FormControl('', [
      Validators.required
    ]),

admissionWindowOpenDate: new FormControl('', [
      Validators.required
    ]),

admissionWindowCloseDate: new FormControl('', [
      Validators.required
    ]),

status: new FormControl('Upcoming', [
      Validators.required
    ])
  }, {
    validators: dateValidator
  });

constructor(private academicYearService: AcademicYearService) {}

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

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

validateYearLabel(
    control: AbstractControl
  ): ValidationErrors | null {
    const value = control.value;

if (!value || !/^\d{4}-\d{4}$/.test(value)) {
      return null;
    }

const [startYear, endYear] = value.split('-').map(Number);

return endYear === startYear + 1
      ? null
      : { invalidYearRange: true };
  }

loadForm(): void {
    this.serverError = '';
    this.academicYearCode = '';
    this.academicYearForm.reset({
      yearLabel: '',
      startDate: '',
      endDate: '',
      admissionWindowOpenDate: '',
      admissionWindowCloseDate: '',
      status: 'Upcoming'
    });

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

this.isLoading = true;

this.academicYearService.getById(this.selectedId).subscribe({
      next: (year) => {
        this.academicYearCode = year.academicYearCode;

this.academicYearForm.patchValue({
          yearLabel: year.yearLabel,
          startDate: year.startDate.substring(0, 10),
          endDate: year.endDate.substring(0, 10),
          admissionWindowOpenDate:
            year.admissionWindowOpenDate.substring(0, 10),
          admissionWindowCloseDate:
            year.admissionWindowCloseDate.substring(0, 10),
          status: year.status
        });

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

submitForm(): void {
    if (this.academicYearForm.invalid) {
      this.academicYearForm.markAllAsTouched();
      return;
    }

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

const formValue = this.academicYearForm.getRawValue();

const data = {
      yearLabel: formValue.yearLabel!,
      startDate: formValue.startDate!,
      endDate: formValue.endDate!,
      admissionWindowOpenDate: formValue.admissionWindowOpenDate!,
      admissionWindowCloseDate: formValue.admissionWindowCloseDate!,
      status: formValue.status!
    };

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

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

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

Related Examples

Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Anonymous

3 weeks ago

68
record

Anonymous

3 weeks ago

11
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
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
3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Monica D.

2 years ago

4.2k
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.3k
Status Flow

Anonymous

1 month ago

71
Stepper - Without Buttons

farisubuntu

2 years ago

2.1k
اصقل جسدك صفحة Landing

Hasan AlDoy (McDoy)

5 months ago

193
Resizable container
Resizable container

Ganesh Salunke

9 months ago

515