when I have below code (Angular 13)

     <div class="input-group flex-nowrap">
                  <span class="input-group-text" id="addon-wrapping" style="color: green;"><i class="fa fa-user"></i></span>
                  <input type="text" class="form-control" placeholder="Enter Username" aria-label="Username" aria-describedby="addon-wrapping"
                  name="username"  #username = "ngModel"
                  [ngClass]="{ 'is-valid': username.touched && !username.errors,'is-invalid': username.touched && username.errors }" >
              </div>

at compile time I got = No directive found with exportAs ‘ngModel’

I imported both FormsModule and ReactiveModule in app.module.ts

I but in child module component its working fine.

Conponent which declare in app.module.ts those component having issue.

please help on this

I see multipe ans but not working