Я пытаюсь использовать de FormBuilder в моем приложении Ionic 4, но оно выдает мне эту ошибку
compiler.js:2430 Uncaught Error: Can't resolve all parameters for FormGroup: (?, ?, ?).
at syntaxError (compiler.js:2430)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18983)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18876)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:19098)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:19107)
at compiler.js:19045
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:19005)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18724)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26025)
Я прочитал этот вопрос Угловая ошибка 2: Не удается разрешить все параметрыдля FormGroup , но импорт ReactiveFormsModule в appmodule.ts не решен.Посмотрите:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy, ModalController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IonicStorageModule } from '@ionic/storage'
import { AutenticacaoService } from './services/autenticacao.service'
import { GuardaautenticacaoService } from './services/guardaautenticacao.service'
import { LoadHomeService } from './private/home/load-home.service';
import { HttpClientModule } from '@angular/common/http';
import { TarefasDetalhePageModule } from './private/sharedmodule/tarefas-detalhe/tarefas-detalhe.module'
import { TarefadetalheService } from './private/sharedmodule/tarefas-detalhe/tarefadetalhe.service';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
IonicStorageModule.forRoot(),HttpClientModule, TarefasDetalhePageModule ],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
AutenticacaoService,
GuardaautenticacaoService,
LoadHomeService,
ModalController,
TarefadetalheService,
FormBuilder,
FormGroup,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
Это мой класс, который пытается создать форму:
import { Component, OnInit } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
import { TarefadetalheService } from './tarefadetalhe.service';
import { Tarefa } from '../../models/tarefa.model';
import { TipoTarefa } from '../../models/tipotarefa.model';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-tarefas-detalhe',
templateUrl: './tarefas-detalhe.page.html',
styleUrls: ['./tarefas-detalhe.page.scss'],
})
export class TarefasDetalhePage implements OnInit {
idTarefa = null
tarefa: Tarefa
tiposTarefas : TipoTarefa[]
formulario: FormGroup
constructor(
private navParams: NavParams,
private getTarefaDetalhe: TarefadetalheService,
private modalController:ModalController,
public fb: FormBuilder) { }
ngOnInit() {
this.getGeral()
this.getTiposTarefas()
this.createForm()
}
getGeral(){
this.idTarefa = this.navParams.get('id_tarefa');
this.getTarefaDetalhe.recuperaDetalhes().subscribe((data)=>{ //passar o id da tarefa como parametro no recupera detalhes
this.tarefa = data
})
}
getTiposTarefas(){
this.getTarefaDetalhe.recuperaTiposTarefas().subscribe((data)=>{
this.tiposTarefas = data
})
}
createForm(){
this.formulario = this.fb.group({
'tipotarefa':['', Validators.compose([Validators.required])]
});
}
closeModal()
{
this.modalController.dismiss();
}
}
и вот мой HTML:
<ion-content padding *ngIf="tarefa != null">
<form [formGroup]="formulario">
<h4>
<ion-icon name="list-box"></ion-icon> Geral
</h4>
<ion-grid>
<ion-row>
<ion-col size="8">
<ion-label position="floating">Tipo de Tarefa</ion-label>
<ion-select formControlName="tipotarefa" [ngModel]="tarefa.tipoTarefa.id" okText="Confirmar" cancelText="Cancelar">
<ion-select-option *ngFor="let tipo of tiposTarefas" [value]="tipo.id">{{tipo.descricao}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
</ion-grid>
<h4>
<ion-icon name="calendar"></ion-icon> Horário
</h4>
<ion-item-divider></ion-item-divider>
<ion-grid>
<ion-row>
<ion-col size="5">
<ion-label position="stacked">Data</ion-label>
<ion-datetime display-format="DD-MM-YYYY" max="2050-10-31" picker-format="DD-MM-YYYY" [ngModel]="tarefa.data_tarefa"></ion-datetime>
</ion-col>
<ion-col size="3">
<ion-label position="stacked">Inicio</ion-label>
<ion-datetime display-format="HH:mm" picker-format="HH:mm" [ngModel]="tarefa.inicio"></ion-datetime>
</ion-col>
<ion-col size="3">
<ion-label position="stacked">Fim</ion-label>
<ion-datetime display-format="HH:mm" picker-format="HH:mm" [ngModel]="tarefa.fim"></ion-datetime>
</ion-col>
</ion-row>
</ion-grid>
<h4>
<ion-icon name="person"></ion-icon> Cliente
</h4>
<ion-item-divider></ion-item-divider>
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</form>
</ion-content>
Вот мой репозиторий на github, еслиВы хотите: https://github.com/tiagosilveiraa/PManager