how to do angular 9 form validation

Create a form in your component:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      selectItem: new FormControl('-1', Validators.required),
      checkbox: new FormControl('', Validators.requiredTrue)
    });
  }
}

1. In this example, we are creating a form with two fields: a dropdown (selectItem) and a checkbox (checkbox).

2. Add the form fields to your HTML template:

  

    Select Item:
    
      
        {{ item.name }}
      
    
    

      
Select an item
    
  
  

    Checkbox:
    

      
         I agree
      
    
    

      
Please agree to the terms
    
  
  Submit

In this example, we are using the ng-select component for the dropdown. We have added validation messages to show when the dropdown or checkbox fields are invalid.

Note: items is an array of objects that contain id and name properties. This array is used to populate the dropdown options.

.ng-invalid.ng-touched {
  border-color: #dc3545;
}

.error-message {
  color: #dc3545;
  font-size: 80%;
  margin-top: 5px;
}

1. In this example, we are adding a red border color to invalid fields and displaying the validation messages below the fields.

2. Add the necessary imports to your module:

3. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   import { NgSelectModule } from '@ng-select/ng-select';
   
   @NgModule({
     imports: [
       FormsModule,
       ReactiveFormsModule,
       NgSelectModule
     ]
   })
   export class AppModule { }