下面是一个使用Angular 2和Ionic创建表单的示例代码:
npm install @ionic/angular
Ionic Form
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.page.html',
styleUrls: ['./form.page.scss'],
})
export class FormPage implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
submitForm() {
if (this.myForm.valid) {
// 处理表单提交逻辑
console.log(this.myForm.value);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormPage } from './form/form.page';
@NgModule({
declarations: [AppComponent, FormPage],
entryComponents: [FormPage],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
这样就可以在Ionic应用程序中创建一个基本的表单页面。