<form class="row g-3 needs-validation custom-input" novalidate="" [formGroup]="validationForm" (ngSubmit)="submitForm()">
  <div class="col-12">
    <label class="form-label" for="validationCustom01">First Name </label>
    <input class="form-control" id="validationCustom01" type="text" placeholder="Mark" formControlName="firstName">
  </div>
  <div class="col-12">
    <label class="col-sm-12 col-form-label" for="inputPassword1">Password </label>
    <input class="form-control" id="inputPassword1" type="password" formControlName="password">
  </div>
  <div class="col-12">
    <label class="form-label" for="validationCustom04">State </label>
    <select2 [data]="selectState" formControlName="state" [templates]="template" placeholder="Choose..">
      <ng-template #template let-item="label">
      {{ item }}
      </ng-template>
    </select2>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="validationCustom03">City </label>
    <input class="form-control" id="validationCustom03" type="text"formControlName="city">
  </div>
  <div class="col-md-6">
    <label class="form-label" for="validationCustom05">Zip </label>
    <input class="form-control" id="validationCustom05" type="text" formControlName="zip">
  </div>
  <div class="col-12"> 
    <div class="card-wrapper border rounded-3 checkbox-checked">
      <h6 class="sub-title">Select Your Payment Method </h6>
      <div class="radio-form">
        <div class="form-check">
          <input class="form-check-input" id="validationFormCheck25" type="radio" name="radio-stacked" required="">
          <label class="form-check-label" for="validationFormCheck25">MaterCard </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" id="validationFormCheck23" type="radio" name="radio-stacked" required="">
          <label class="form-check-label" for="validationFormCheck23">VISA </label>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12"> 
    <select2 [data]="selectTheme" formControlName="selectTheme" [templates]="template" placeholder="Select Your Favorite Pixelstrap theme">
      <ng-template #template let-item="label">
      {{ item }}
      </ng-template>
    </select2>
  </div>
  <div class="col-12"> 
    <label class="form-label" for="formFile1">Choose File </label>
    <input class="form-control" id="formFile1" type="file" aria-label="file example" formControlName="selectFile">
  </div>
  <div class="col-12"> 
    <label class="form-label" for="validationTextarea">Description </label>
    <textarea class="form-control" id="validationTextarea" placeholder="Enter your comment" formControlName="description"> </textarea>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" id="invalidCheck" type="checkbox" value="" formControlName="condition">
      <label class="form-check-label" for="invalidCheck">Agree to terms and conditions </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" 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';

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

export class Form {

  public myform = 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.myform.markAllAsTouched();
    if (this.myform.valid) {
      window.location.reload();
    }
  }
}

<form class="row g-3">
  <div class="col-md-12">
    <label class="form-label" for="inputEmail4">Email</label>
    <input class="form-control" id="inputEmail4" type="email" placeholder="Enter Your Email">
  </div>
</form>

<!-- Radios -->
<div class="form-check form-check-inline radio radio-primary">
  <input class="form-check-input" id="radio1" type="radio" name="radio5" value="option5" >
  <label class="form-check-label mb-0" for="radio1">Option</label>
</div>

<div class="form-check form-check-inline radio radio-primary">
  <input class="form-check-input" id="radio2" type="radio" name="radio5" value="option5" disabled="">
  <label class="form-check-label mb-0" for="radio2">Disabled</label>
</div>

<div class="form-check form-check-inline radio radio-primary">
  <input class="form-check-input" id="radio2" type="radio" name="radio5" value="option5" checked="">
  <label class="form-check-label mb-0" for="radio2">Checked</label>
</div>

<!-- Checkboxes -->

<div class="form-check">
  <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" value="">
  <label class="form-check-label" for="flexCheckIndeterminate"> Default</label>
</div>

<div class="form-check">
  <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" value="" disabled="">
  <label class="form-check-label" for="flexCheckIndeterminate"> Disabled</label>
</div>

<div class="form-check">
  <input class="form-check-input" id="flexCheckIndeterminate" type="checkbox" value="" checked="">
  <label class="form-check-label" for="flexCheckIndeterminate"> Checked</label>
</div>

npm i @ng-bootstrap/ng-bootstrap

<input ngbDatepicker #dob="ngbDatepicker" class="form-control" placeholder="yyyy-mm-dd" name="dob"/>

<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-component

<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.html',
  styleUrl: './select2.scss'
})

export class Select2 {

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

npm uninstall ng-select2-component

npm install @ng-bootstrap/ng-bootstrap

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

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';

@Component({
selector: 'ngbd-typeahead-basic',
templateUrl: './typeahead-basic.html',
styles: ['.form-control { width: 300px; }']
})
export class NgbdTypeaheadBasic {
public model: any;

search = (text$: Observable) =>
  text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term.length < 2 ? [] : states.filter(v=> v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )
    }

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',
];