CODEWITHSUNDEEP
angularbootstrap-4angular-reactive-forms
Saad Abbasi
Saad Abbasi

Reputation: 853

How to Fix this error in Angular Application "No provider for ControlContainerAngular"

I am using bootstrap-4 in my angular7 application. I want to design my application with bootstrap

 <nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

I expected that there should be search box as including in bootstrap documentation but the error is "No provider for ControlContainer Angular"

Upvotes: 0

Views: 109

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

Are you using the ReactiveFormsModule in your application?

If yes, then you should create a FormGroup and then bind it to your Html

Don't forget to import both ReactiveFormsModule and FormsModule in your application.

component.ts file

export class MyComponent {
  reactiveForm= new FormGroup({
    reactiveFormControl: new FormControl('')
  });
}

html file

<form class="form-inline" [formGrop]="reactiveForm">
....
<input type="text" formControlName="reactiveFormControl">

Check ControlContainer documentation

If it's not fixed, please share tyour module.ts for further investigation.

Upvotes: 1

Related Questions