Error: Cannot find control with name: 'userInput' , Error: Cannot find control with name: 'moduleName-2-role-30'

I have tried the formbuilder in both constructor as well as inside ngOnInit.But still the error persistent. The sample output of this line is moduleName-{{module.module_id}}-role-{{ roles.key}}='moduleName-2-role-31'.

 <form class="step-container" [formGroup]="modulesForm" *ngIf="modulesForm">
                <nb-tabset fullWidth (changeTab)="changeActiveTab($event)">
                  <nb-tab badgeStatus="warning" class="profileTab p-0 mt-5" *ngFor="let module of modules;  index as i"
                    [tabTitle]="module.module_name" [active]="i == 0"
                    [badgeText]="(moduleAccessCount[module.module_name]) ? moduleAccessCount[module.module_name] : ''">
                    <div class="searchBar">
                    <input type="text" fullWidth nbInput formControlName="userInput"
                    name="searchText" #searchText (keyup)="onKeyUpEvent(searchText.value)" placeholder="Enter text to search" 
                    autofocus>
                     <i class="fa fa-search searchIcon" aria-hidden="true"></i>
                    </div>
                    <div *ngFor="let roles of filteredQueues | keyvalue">
                      <div class="modules-roles"
                        [ngClass]="getRoleClass(roles)">
                        <nb-checkbox *ngIf="activeRoles.indexOf(roles.key) !== -1" style="padding-right: 1em"
                          [checked]="true" formControlName="moduleName-{{
                              module.module_id
                            }}-role-{{ roles.key }}" (checkedChange)="selected($event,roles.key)" data-toggle="tooltip" title="{{getRoleClass(roles) == 'active-roles' ? 'Approved' : (getRoleClass(roles) == 'pending-roles' ? 'Pending' : '')}}">{{ roles.value }} 
                        </nb-checkbox>
    
                        <nb-checkbox *ngIf="activeRoles.indexOf(roles.key) < 0" style="padding-right: 1em" [checked]="false"
                          formControlName="moduleName-{{
                              module.module_id
                            }}-role-{{ roles.key }}" (checkedChange)="selected($event,roles.key)">{{ roles.value }}
                        </nb-checkbox>
                        <i class="fas fa-check-circle" *ngIf="getRoleClass(roles) == 'active-roles'"></i>
                        <i class="fas fa-exclamation-triangle" *ngIf="getRoleClass(roles) == 'pending-roles'"></i>
                        <i class="fa fa-lock" *ngIf="getRoleClass(roles) == 'inactive-roles'"></i>
                        <i class="fa fa-lock-open" *ngIf="getRoleClass(roles) == 'new-roles'"></i>
                      </div>
                    </div>
    
                    <br>
                  </nb-tab>
                </nb-tabset>
              </form>

Ts:

this.modulesForm = this.fb.group({
  userInput: new FormControl()
});

If you using a form builder you don't need to create and instance from FormControl try this code it will solve your problem:

this.modulesForm = this.fb.group({
  userInput: ['']
});