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 40

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

register
this is register form

aditya_sharma

3 months ago

513
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.3k
Maintenance page

Faye

1 year ago

2.7k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

794
templete
templete

Uwera Dorcas

1 year ago

1.4k
background animation
background animation

Jayendra Madara

2 years ago

4k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

115
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

709
form2

Anonymous

3 weeks ago

6
Collapsible content

Rafferty Kim

3 years ago

14.7k
Terms of Service Page Template

Anonymous

1 year ago

3.1k