error message from angular validation system it does not working

Question

I tried to manage validation system using angular in dropdownlist, I created a form contains a dropdownlist and a button, I want when I click on the button without choosing element in dropdownlist, it show a message fields is required, in my example it hides only message and when I click on button there is nothing to show.

validation.component.html

<form #formClient="ngForm"> 
                <div class="form-group">
                    <select name="category_id" [(ngModel)]="annonce.category_id" #category_id="ngModel" class="form-control" [ngClass]="{ 'is-invalid': category_id.errors }" required>
                        <option selected disabled></option>
                        <option [ngValue]="1">najib</option>
                        <option [ngValue]="2">ali</option>
                    </select>
                    <div [hidden]="!category_id.errors?.required" class="invalid-feedback">
                        category_id is required
                    </div>
                </div>
                <input type="submit" class="btn btn-primary" value="Partager Annonce">
            </form> 

validation.component.ts

 annonce : Annonce = {
    category_id:0,
  }
  constructor() { }
  ngOnInit(): void {
  }

annonce.ts

export interface Annonce{
    category_id:number,
}

Answer 1

You can achieve this using angular ReactiveForms easily

Import ReactiveFormsModule In App.Module.ts

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

validation.component.ts

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

@Component({
  selector: 'app-validation',
  templateUrl: './validation.component.html',
  styleUrls: ['./validation.component.css']
})
export class ValidationComponent implements OnInit {

  appValForm: FormGroup;
  submitted: boolean = false;
  constructor(public fb:FormBuilder) { 
  }    
  ngOnInit(): void {
    this.appValForm = this.fb.group({
      categoryId:['',[Validators.required]]
    })
  }
  get controls() {
    return this.appValForm.controls;
  }
  submit() {
    this.submitted = true;
  }
}

validation.component.html

<form [formGroup]="appValForm"> 
    <div class="form-group">
        <label>select category</label>
        <select formControlName="categoryId">
            <option selected disabled>Select</option>
            <option [value]="1">najib</option>
            <option [value]="2">ali</option>
        </select>
        <ng-container *ngIf="controls.categoryId?.errors">
            <small *ngIf="controls.categoryId?.errors.required && submitted">Input is required</small>
        </ng-container>
    </div>
    <button type="button" class="btn btn-primary" (click)="submit()" >Submit</button>
</form>