【发布时间】：2023-03-12 05:11:01
【问题描述】：
我正在尝试使用 ngModel 进行数据绑定，但是，我得到一个错误 ngForm not found。我已经在 app.module.ts 中包含了 formsmodule，如下所示。当我删除 #grantAccessForm="ngForm" 时错误消失，但是当我这样做并在输入字段中输入数据并提交时，我的页面会刷新并且刷新的页面在 url 中有参数，如下所示：“ http://localhost:8100/signup?name=a&userName=a&email=a@email.com&password=aa&confirm=aa"
我希望能够在不刷新页面的情况下在 onSubmit() 函数中执行某些操作，有人可以向我解释一下 #grantAccessForm= "ngForm" 这意味着什么以及为什么我会得到这个错误。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { LoginPageComponent } from './login/login-page/login-page.component';
import { SignUpPageComponent } from './login/sign-up-page/sign-up-page.component';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
component: LoginPageComponent
},
{
path: 'login',
component: LoginPageComponent,
//()=> import('./login/login-page/login-page.component').then(m=> m.LoginPageComponent)
},
{
path: 'signup',
component: SignUpPageComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(),
AppRoutingModule,
ReactiveFormsModule
],
exports:[],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
注册页面.component.html
</ion-content>
<form #grantAccessForm= "ngForm" (ngSubmit)="onSubmit(grantAccessForm)">
<ion-grid>
<ion-row justify-content-center>
<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
<div class="centerText">
<h3>Create your account!</h3>
</div>
<div padding>
<ion-item>
<ion-input name="name" type="text" placeholder="Name" [(ngMode)]="dataModel.name"></ion-input>
</ion-item>
<ion-item>
<ion-input name="userName" type="text" placeholder="Username" [(ngModel)]="dataModel.username"></ion-input>
</ion-item>
<ion-item>
<ion-input name="email" type="email" placeholder="your@email.com" [(ngModel)]="dataModel.email"></ion-input>
</ion-item>
<ion-item>
<ion-input name="password" type="password" placeholder="Password" [(ngModel)]="dataModel.password"></ion-input>
</ion-item>
<ion-item>
<ion-input name="confirm" type="password" placeholder="Password again" [(ngModel)]="dataModel.passwordAgain"></ion-input>
</ion-item>
</div>
<div padding>
<ion-button size="large" type="submit" expand="block" >Register</ion-button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
注册页面.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-sign-up-page',
templateUrl: './sign-up-page.component.html',
styleUrls: ['./sign-up-page.component.scss'],
})
export class SignUpPageComponent implements OnInit {
// Import ViewChild
@ViewChild('grantAccessForm', {static: false}) grantAccessForm: NgForm;
dataModel: any = {}; // Your data model
constructor() { }
ngOnInit() {}
onSubmit(form) {
console.log(form);
}
}
【问题讨论】：
标签： angular forms ionic-framework ngmodel