Angular8 表单
表单用于处理用户输入数据。 Angular 8 支持两种类型的表单。他们是
模板驱动en 形式和
反应形式。本节详细介绍了 Angular 8 表单。
模板驱动的表单
模板驱动的表单是使用模板中的指令创建的。它主要用于创建一个简单的表单应用程序。让我们简要了解如何创建模板驱动的表单。
配置表单
在了解表单之前，让我们学习如何在应用程序中配置表单。要启用模板驱动的表单，首先我们需要在
app.module.ts 中导入 FormsModule。 下面给出-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//import FormsModule here
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
FormsModule //Assign FormsModule
],
一旦导入
FormsModule，应用程序就可以进行表单编程了。
创建简单的表单
让我们在 Angular 8 中创建一个示例应用程序
(template-form-app) 来学习模板驱动的表单。
打开命令提示符并使用以下命令创建新的 Angular 应用程序-
cd /go/to/workspace
ng new template-form-app
cd template-form-app
在
AppComponent中配置
FormsModule，如下所示-
...
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
使用 Angular CLI 创建一个测试组件，如下所述-
ng generate component test
上面创建了一个新的组件，输出如下-
CREATE src/app/test/test.component.scss (0 bytes)
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes)
UPDATE src/app/app.module.ts (545 bytes)
让我们创建一个简单的表单来显示用户输入的文本。
在
test.component.html 文件中添加以下代码如下-
<form #userName="ngForm" (ngSubmit)="onClickSubmit(userName.value)">
<input type="text" name="username" placeholder="username" ngModel>
<br/>
<br/>
<input type="submit" value="submit">
</form>
在这里，我们在
input 文本字段中使用了
ngModel 属性。
在
test.component.ts文件中创建
onClickSubmit()方法，如下图
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
ngOnInit() {
}
onClickSubmit(result) {
console.log("You have entered : " + result.username);
}
}
打开 app.component.html 并更改如下指定的内容-
最后，使用以下命令启动您的应用程序（如果尚未完成）-
现在，运行您的应用程序，您可以看到以下响应-
在输入文本字段中输入
Peter 并输入提交。
onClickSubmit 函数将被调用，用户输入的文本
Peter 将作为参数发送。
onClickSubmit 将在控制台打印用户名，输出如下-
反应式
Reactive Forms 是在组件类中创建的，因此它也被称为模型驱动的表单。每个表单控件在组件中都有一个对象，这为表单编程提供了更大的控制和灵活性。
Reactive Form 基于结构化数据模型。让我们了解如何在 angular 中使用 Reactive 表单。
配置响应式表单
要启用响应式表单，首先我们需要在
app.module.ts 中导入
ReactiveFormsModule。定义如下
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { FormsModule } from '@angular/forms';
//import ReactiveFormsModule here
import { ReactiveFormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule //Assign here
]
创建响应式表单
在开始创建 Reactive 表单之前，我们需要了解以下概念，
FormControl-定义单个表单控件的基本功能
FormGroup-用于聚合集合表单控件的值
FormArray-用于将表单控件的值聚合到一个数组中
ControlValueAccessor-充当表单 API 与 HTML DOM 元素之间的接口。
让我们在 Angular 8 中创建一个示例应用程序
(reactive-form-app) 来学习模板驱动的表单。
打开命令提示符并使用以下命令创建新的 Angular 应用程序-
cd /go/to/workspace
ng new reactive-form-app
cd reactive-form-app
在
AppComponent中配置
ReactiveFormsModule，如下所示-
...
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
使用 Angular CLI 创建一个
test 组件，如下所述-
ng generate component test
上面创建了一个新的组件，输出如下-
CREATE src/app/test/test.component.scss (0 bytes)
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes)
UPDATE src/app/app.module.ts (545 bytes)
让我们创建一个简单的表单来显示用户输入的文本。
我们需要在
TestComponent中导入
FormGroup、FormControl类。
import { FormGroup, FormControl } from '@angular/forms';
在
test.component.ts 文件中创建
onClickSubmit() 方法，如下所示-
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
userName;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
userName: new FormControl("Tutorialspoint")
});
}
onClickSubmit(data) {this.userName = data.userName;}
}
这里，
创建了一个 formGroup 的实例并将其设置为局部变量 formdata。
创建一个 FormControl 实例并将其设置为 formdata 中的条目之一。
创建了一个 onClickSubmit() 方法，用于设置局部变量 userName 及其参数。
在
test.component.html 文件中添加以下代码。
<div>
<form [formGroup]="formdata" (ngSubmit)="onClickSubmit(formdata.value)" >
<input type= text" name="userName" placeholder="userName"
formControlName = "userName">
<br/>
<br/>
<input type="submit" value="Click here">
</form>
</div>
<p> Textbox result is: {{userName}} </p>
这里，
创建新表单并将其 formGroup 属性设置为 formdata。
创建新的输入文本字段并将formControlName 设置为用户名。
ngSubmit 事件属性用于表单中，并将 onClickSubmit() 方法设置为其值。
onClickSubmit() 方法获取表单数据值作为其参数。
打开
app.component.html 并更改如下指定的内容-
最后，使用以下命令启动您的应用程序（如果尚未完成）-
现在，运行您的应用程序，您可以看到以下响应-
在输入文本字段中输入
Tutorialspoint 并输入提交。
onClickSubmit 函数将被调用，用户输入的文本
Peter 将作为参数发送。
我们将在下一章进行表单验证。
