how to do angular 9 form validation

Question

Angular 9 form validation with dropdowns (ngseelct) and selectitemlist label checkbox for

I have a from with dropdown ngselect and checkbox list calss fom checklabel and inout checkboxes on buton click show validation erors.so how to display eror .in dropdowns deafult value is -1.so i user didnt select any dropdown a=or checkbox display erors

Rajkiran Swain · Answer

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) }); } } In this example, we are creating a form with two fields: a dropdown ( selectItem ) and a checkbox ( checkbox ). 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; } In this example, we are adding a red border color to invalid fields and displaying the validation messages below the fields. Add the necessary imports to your module: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; @NgModule({ imports: [ FormsModule, ReactiveFormsModule, NgSelectModule ] }) export class AppModule { }