Nullinjectorerror: No Provider for Formcontrol! Error in simple form with Reactiveforms

Question

I’m having an error trying to render a simple contact form, but I don’t have a vision of why.

Follow the error:

core.js:14597 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[ContactComponent -> FormControl]: 
  StaticInjectorError(Platform: core)[ContactComponent -> FormControl]: 
    NullInjectorError: No provider for FormControl!
Error: StaticInjectorError(AppModule)[ContactComponent -> FormControl]: 
  StaticInjectorError(Platform: core)[ContactComponent -> FormControl]: 
    NullInjectorError: No provider for FormControl!
    at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveToken (core.js:3473)
    at tryResolveToken (core.js:3417)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
    at resolveNgModuleDep (core.js:19784)
    at NgModuleRef_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
    at resolveNgModuleDep (core.js:19784)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push.../../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

My scenario implementation is extremely simple:

This is my view: contact.component.html

<div class="container-fluid">
  <section class="row">
    <div class="col-xs-12 col-md-12">
      <h1 class="underline">Contato</h1>
    </div>
  </section>
  <section class="row">
    <div class="col-xs-12 col-md-4">
      <form [formGroup]="contactFormGroup">
        <div class="form-group">
          <label>Nome:</label>
          <input type="text" placeholder="Digite seu nome" class="form-control" formControlName="name">
        </div>
        <div class="form-group">
          <label>E-mail:</label>
          <input type="text" placeholder="Digite seu e-mail" class="form-control" formControlName="email">
        </div>
        <div class="form-group">
          <label>Telefone/Whatsapp:</label>
          <input type="text" placeholder="Digite seu telefone" class="form-control" formControlName="phone">
        </div>
        <div class="form-group">
          <label>Message:</label>
          <textarea placeholder="Digite sua mensagem" class="form-control" rows="5"
            formControlName="message"></textarea>
        </div>
        <button class="btn btn-primary mt-3" type="submit" (click)="onSubmit()">Enviar</button>
      </form>
    </div>
    <div class="col-xs-12 col-md-8">
    </div>
  </section>
</div>

My logical implementation: contact.componentts.

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

@Component({
  selector: 'aimbra-wc-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {

  public contactFormGroup: FormGroup;

  constructor(private fb: FormBuilder, private formControl: FormControl) {
  }

  ngOnInit() {
    this.contactFormGroup = this.fb.group({
      name: new FormControl('')
    })
  }

  onSubmit() {
    console.log(this.contactFormGroup.value)
  }


}

The Reactiveformsmodule is being imported in contact.modulets.:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactComponent } from './contact.component';
import { Routes, RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    component: ContactComponent
  }
];

@NgModule({
  declarations: [ContactComponent],
  imports: [
    RouterModule.forChild(routes),
    ReactiveFormsModule,
    CommonModule
  ]
})
export class ContactModule { }

I’ve seen some solutions present in the English language, but none of them worked.

Gratitude for the collaboration...!

Answer 1

Try it like this

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

@Component({
  selector: 'aimbra-wc-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {

  public contactFormGroup: FormGroup;

  constructor(private fb: FormBuilder) {//remove o form control aqui ele não é um serviço
  }

  ngOnInit() {
    this.contactFormGroup = this.fb.group({
      name: ['']//so o valor do elemento
    })
  }

  onSubmit() {
    console.log(this.contactFormGroup.value)
  }

}