Я пытаюсь создать "простую" форму в Ioni c 6.10.1 с Angular 9.1.10.
Но я продолжаю получать следующую ошибку:
ERROR Ошибка: Неперехваченный (в обещании): Ошибка: NodeInjector: NOT_FOUND [ControlContainer]
Я подтвердил, что импортирую в FormsModule и ReactiveFormsModule, я определяю formGroup в шаблон и импорт зависимостей в компонент. По сути, я рассмотрел все вопросы, которые смог найти через Google. Я также несколько раз перезапускал сервер, но безуспешно.
С закомментированным кодом я сузил его до файла шаблона, но не могу понять проблему.
I надеюсь, что набор глаз fre sh может помочь ....
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.ts
import { Component,OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
type:Array<object> =[
{name: 'mulch',
weightPerYard: 700},
{name: 'mravel',
weightPerYard: 2600},
{name: 'sand',
weightPerYard: 2700},
{name: 'topsoil',
weightPerYard: 2000},
];
calc: FormGroup;
totalYards:Number = 0;
totalTons:Number = 0;
constructor(private form:FormBuilder) {
}
ngOnInit() {
this.calc = this.form.group({
type: ['', [Validators.required]],
width: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
length: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
depth: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
})
}
calculateWeight(){
console.log("TEST");
}
}
форма HTML код
<form [formGroup]="calc" (ngSubmit)="calculateWeight()" id="calc-form">
<ion-item>
<ion-label>Type of Material: </ion-label>
<ion-select oktext="Ok" formControlName="type" name="type" dismissText="Dismiss" >
<ion-select-option value="mulch">Mulch</ion-select-option>
<ion-select-option value="gravel">Gravel</ion-select-option>
<ion-select-option value="sand">Sand</ion-select-option>
<ion-select-option value="topsoil">Top Soil</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Width (sq feet): </ion-label>
<ion-input type="number" clearInput formControlName="width" name="width" ></ion-input>
</ion-item>
<ion-item>
<ion-label>Length (sq feet): </ion-label>
<ion-input type="number" clearInput formControlName="length" name="length" ></ion-input>
</ion-item>
<ion-item>
<ion-label>Depth (inches): </ion-label>
<ion-input type="number" clearInput formControlName="depth" name="depth" ></ion-input>
</ion-item>
<ion-button expand="block" strong size="large" >Submit</ion-button>
</form>