Estou tendo um erro ao tentar renderizar um simples formlário de contato, mas não tenho a visão do motivo.
Segue o erro:
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)
A minha implementação de cenário é extremamente simples:
Esta é a minha 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>
A minha implementação lógica: contact.component.ts
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)
}
}
O ReactiveFormsModule esta sendo importando no contact.module.ts:
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 { }
Já vi algumas soluções presentes no idioma inglês, mas nenhuma delas deu certo.
Gratidão pela colaboração...!