<form class="grid grid-cols-12 gap-4 needs-validation custom-input" [formGroup]="validationForm" (ngSubmit)="submitForm()">
  <div class="col-span-4 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltip01">First Name</label>
    <input class="form-control" id="validationTooltip01" type="text" placeholder="Mark" formControlName="firstName"
      [ngClass]="{ 'is-invalid' : validationForm.controls['firstName'].touched && validationForm.controls['firstName'].errors?.['required'] , 'is-valid' : validationForm.controls['firstName'].valid}">
      @if(validationForm.controls['firstName'].valid) {
        <div class="valid-tooltip">Looks's Good!</div>
      }
  </div>

  <div class="col-span-4 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltip02">Last Name</label>
    <input class="form-control" id="validationTooltip02" type="text" placeholder="Otto" formControlName="lastName"
      [ngClass]="{ 'is-invalid' : validationForm.controls['lastName'].touched && validationForm.controls['lastName'].errors?.['required'] , 'is-valid' : validationForm.controls['lastName'].valid}">
      @if(validationForm.controls['lastName'].valid) {
        <div class="valid-tooltip">Looks's Good!</div>
      }
  </div>

  <div class="col-span-4 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltipUsername">Username</label>
    <div class="input-group has-validation flex flex-nowrap">
      <span class="input-group-text rounded-none !rounded-l-md" id="validationTooltipUsernamePrepend">&#64;</span>
      <input class="form-control rounded-none !rounded-r-md" id="validationTooltipUsername" type="text" formControlName="userName" 
        [ngClass]="{ 'is-invalid' : validationForm.controls['userName'].touched && validationForm.controls['userName'].errors?.['required'] , 'is-valid' : validationForm.controls['userName'].valid}">
        @if(validationForm.controls['userName'].touched && validationForm.controls['userName'].errors?.['required']) {
          <div class="invalid-tooltip">Please choose a unique and valid username.</div>
        }
    </div>
  </div>

  <div class="col-span-6 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltip03">City</label>
    <input class="form-control" id="validationTooltip03" type="text" formControlName="city" 
      [ngClass]="{ 'is-invalid' : validationForm.controls['city'].touched && validationForm.controls['city'].errors?.['required'] , 'is-valid' : validationForm.controls['city'].valid}">
      @if(validationForm.controls['city'].touched && validationForm.controls['city'].errors?.['required']) {
        <div class="invalid-tooltip">Please provide a valid city.</div>
      }
  </div>

  <div class="col-span-3 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltip04">State</label>
    <select2 [data]="selectState" formControlName="state" id="validationTooltip04" placeholder="Choose.." 
      [ngClass]="{ 'is-invalid' : validationForm.controls['state'].touched && validationForm.controls['state'].errors?.['required'] , 'is-valid' : validationForm.controls['state'].valid}"></select2>
      @if(validationForm.controls['state'].valid && validationForm.controls['state'].errors?.['required']) {
        <div class="invalid-tooltip">Please select a valid state.</div>
      }
  </div>

  <div class="col-span-3 md:col-span-12 position-relative">
    <label class="form-label" for="validationTooltip05">Zip</label>
    <input class="form-control" id="validationTooltip05" type="text" formControlName="zip" 
      [ngClass]="{ 'is-invalid' : validationForm.controls['zip'].touched && validationForm.controls['zip'].errors?.['required'] , 'is-valid' : validationForm.controls['zip'].valid}">
      @if(validationForm.controls['zip'].touched && validationForm.controls['zip'].errors?.['required']) {
        <div class="invalid-tooltip">Please provide a valid zip.</div>
      }
  </div>

  <div class="col-span-12">
    <button class="btn btn-primary text-white" type="submit">Submit form</button>
  </div>

</form>

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { Select2Module } from 'ng-select2-component';

import { selectState } from '../../../../../shared/data/form-control';

@Component({
  selector: 'app-form',
  imports: [CommonModule, FormsModule, ReactiveFormsModule, Select2Module],
  templateUrl: './form.component.html',
  styleUrl: './form.component.scss'
})

export class FormComponent {

  public selectState = selectState;
  public validationForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    userName: new FormControl('', Validators.required, ),
    city: new FormControl('', Validators.required),
    state: new FormControl('', Validators.required),
    zip: new FormControl('', Validators.required)
  })

  submitForm() {
    this.validationForm.markAllAsTouched();
    if (this.validationForm.valid) {
      window.location.reload();
    }
  }
}

<div class="card-wrapper border rounded-3">
    <form class="grid grid-cols-12 gap-4">
        <div class="col-span-12">
          <label class="form-label" for="inputEmail">Email Address</label>
          <input class="form-control" id="inputEmail" type="email" placeholder="name@example.com">
        </div>
    </form>
</div>

<div class="flex flex-wrap -mx-4">
<!-- Radios -->
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-4">
  <div class="space-y-4">
    <div class="flex items-center">
      <input id="radio1" type="radio" name="radio1" value="option1"
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" />
      <label for="radio1" class="ml-2 text-sm text-gray-700">Option <span class="font-semibold">1</span></label>
    </div>

    <div class="flex items-center">
      <input id="radio3" type="radio" name="radio1" value="option1" disabled
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:opacity-50" />
      <label for="radio3" class="ml-2 text-sm text-gray-500">Disabled</label>
    </div>

    <div class="flex items-center">
      <input id="radio4" type="radio" name="radio1" value="option1" checked
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" />
      <label for="radio4" class="ml-2 text-sm text-gray-700">Checked</label>
    </div>
  </div>
</div>

<!-- Checkboxes -->
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-4">
  <div class="space-y-4">
    <div class="flex items-center">
      <input id="checkbox1" type="checkbox"
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" />
      <label for="checkbox1" class="ml-2 text-sm text-gray-700">Default</label>
    </div>

    <div class="flex items-center">
      <input id="checkbox2" type="checkbox" disabled
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:opacity-50" />
      <label for="checkbox2" class="ml-2 text-sm text-gray-500">Disabled</label>
    </div>

    <div class="flex items-center">
      <input id="checkbox3" type="checkbox" checked
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" />
      <label for="checkbox3" class="ml-2 text-sm text-gray-700">Checked</label>
    </div>
  </div>
</div>
</div>

npm i @danielmoncada/angular-datetime-picker

<owl-date-time-inline [pickerType]="'calendar'" [(ngModel)]="selectedMoment"></owl-date-time-inline>

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';

@Component({
  selector: 'app-default-calendar',
  imports: [CommonModule, OwlNativeDateTimeModule, FormsModule, OwlDateTimeModule],
  templateUrl: './default-calendar.component.html',
  styleUrl: './default-calendar.component.scss'
})
export class DefaultCalendarComponent {

  public selectedMoment = new Date();

}

npm uninstall @danielmoncada/angular-datetime-picker

<label class="switch">
 <input type="checkbox" checked="" data-bs-original-title="" title="">
 <span class="switch-state"></span>
</label>
<label class="switch">
 <input type="checkbox" data-bs-original-title="" title="">
 <span class="switch-state"></span>
</label>

npm i ng-select2-componentt

<select2 [data]="selectDetails" [templates]="template" placeholder="Please select">
  <ng-template #template let-item="label">
    {{ item }}
  </ng-template>
</select2>

import { Component } from '@angular/core';
import { Select2Module } from 'ng-select2-component';

@Component({
  selector: 'app-select2',
  imports: [Select2Module],
  templateUrl: './select2.component.html',
  styleUrl: './select2.component.scss'
})

export class Select2Component {

  public selectDetails: Select2Data = [
    {
      label: "One",
      value: "One"
    },
    {
      label: "Two",
      value: "Two"
    },
    {
      label: "Three",
      value: "Three"
    },
  ]
}

npm uninstall ng-select2-componentt

<input id="typeahead-basic" type="text" class="form-control" placeholder="Search for a state" [(ngModel)]="model" (input)="onSearch($event)" />

@if(filteredStates.length > 0){
  <ul class="list-group">
    @for(state of filteredStates; track state){
      <li class="list-group-item" (click)="onSelectState(state)">
        {{ state }}
      </li>
    }
  </ul>
}

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

import { states } from '../../../../../shared/data/form-widgets';

@Component({
    selector: 'app-typeahead',
    imports: [CommonModule, FormsModule],
    templateUrl: './typeahead.component.html',
    styleUrl: './typeahead.component.scss'
})

export class TypeaheadComponent {

  public model: string = '';
  public states = states;
  public filteredStates: string[] = [];
  private searchTerms = new Subject();

  constructor() {
    this.searchTerms.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map((term: string) => term.length < 2 ? [] : this.filterStates(term))
    ).subscribe(filteredStates => {
      this.filteredStates = filteredStates;
    });
  }

  onSearch(event: Event): void {
    const input = (event.target as HTMLInputElement).value;
    this.searchTerms.next(input);
  }

  private filterStates(term: string): string[] {
    return this.states.filter(state => state.toLowerCase().includes(term.toLowerCase())).slice(0, 10);
  }

  onSelectState(state: string): void {
    this.model = state; 
    this.filteredStates = [];
  }
  
}

export const states = [
  'Alabama',
  'Alaska',
  'American Samoa',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'District Of Columbia',
  'Federated States Of Micronesia',
  'Florida',
  'Georgia',
  'Guam',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Marshall Islands',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Northern Mariana Islands',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Palau',
  'Pennsylvania',
  'Puerto Rico',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virgin Islands',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
];