Angular 10 Dynamic Form Fields.

[NANA DARKO]

I'm trying to build a dynamic form where I get all attributes from the server. However the error binding to [class.is-invalid] class is not working. It doesn't indicate an error colour when I click inside and outside of the input fields even though they have "required" attribute.Your assistance is very much appreciated.

<form #clientForm="ngForm" (ngSubmit)="submit(clientForm)" novalidate>

     <div *ngFor="let item of fields" class="form-group">

          <label>{{item?.field_details?.field_name}}</label>

                    <input name="{{item.field_details.field_name}}"

                            [maxlength]="item.field_details.field_max_length"

                            [minlength]="item.field_details.field_min_length"

                           #{{item.field_details.field_name}}="ngModel"

                            [class.is-invalid]="item.field_details.field_name.touched && item.field_details.field_name.invalid"

                            placeholder="must be {{item.field_details.field_min_length}} to {{item.field_details.field_max_length}} characters"

                           ngModel required class="form-control" type="text">

       </div>

</form>