Angular 4 表单
在本章中，我们将了解 Angular 4 中如何使用表单。我们将讨论两种使用表单的方式——模板驱动表单和模型驱动表单。
模板驱动表单
使用模板驱动的表单，大部分工作都在模板中完成；而采用模型驱动表单，大部分工作都是在组件类中完成的。
现在让我们考虑处理模板驱动的表单。我们将创建一个简单的登录表单并在表单中添加电子邮件 ID、密码和提交按钮。首先，我们需要从 @角/核心 这是在 app.module.ts 如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path: 'new-cmp',component: NewCmpComponent}
])
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
So in app.module.ts ，我们已经导入了 FormsModule 并在导入数组中添加了相同的内容，如突出显示的代码所示。
现在让我们在 app.component.html file.
<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" > <input type = "text" name = "emailid" placeholder = "emailid" ngModel> <br/> <input type = "password" name = "passwd" placeholder = "passwd" ngModel> <br/> <input type = "submit" value = "submit"> </form>
我们创建了一个带有输入标签的简单表单，其中包含电子邮件 ID、密码和提交按钮。我们为它分配了类型、名称和占位符。
在模板驱动的表单中，我们需要通过添加 ngModel 指令和 name 属性。因此，无论我们希望 Angular 在哪里访问表单中的数据，都可以将 ngModel 添加到该标签，如上所示。现在，如果我们必须读取 emailid 和 passwd，我们需要在其中添加 ngModel。
如果你看到了，我们还将 ngForm 添加到 ＃用户登录 . The ngForm 指令需要添加到我们创建的表单模板中。我们还增加了功能 点击提交 并分配 用户登录值 to it.
现在让我们在 app.component.ts 并获取表单中输入的值。
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
onClickSubmit(data) {
alert("Entered Email id : " + data.emailid);
}
}
在上述 app.component.ts 文件中，我们已经定义了 onClickSubmit 函数。当你点击表单提交按钮时，控件会来到上面的功能。
浏览器是这样显示的：
表格如下所示。让我们在其中输入数据，在提交功能中，已经输入了电子邮件 ID。
电子邮件 ID 显示在底部，如上面的屏幕截图所示。
模型驱动表单
在模型驱动的表单中，我们需要从 @angular/forms 导入 ReactiveFormsModule 并在导入数组中使用它。
有一个变化进入 app.module.ts。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
HttpModule,
ReactiveFormsModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
In app.component.ts ，我们需要为模型驱动表单导入一些模块。例如， 从“@angular/forms”导入 { FormGroup, FormControl } .
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
emailid;
formdata;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
this.formdata = new FormGroup({
emailid: new FormControl("angular@gmail.com"),
passwd: new FormControl("abcd1234")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
变量 formdata 在类的开始处被初始化，同样使用 FormGroup 进行初始化，如上所示。变量 emailid 和 passwd 使用默认值初始化，以在表单中显示。如果需要，你可以将其保留为空白。
这就是值在表单 UI 中的显示方式。
我们已经使用 formdata 来初始化表单值；我们需要在表单 UI 中使用相同的 app.component.html .
<div>
<form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<input type="text" class="fortextbox" name="emailid" placeholder="emailid"
formControlName="emailid">
<br/>
<input type="password" class="fortextbox" name="passwd"
placeholder="passwd" formControlName="passwd">
<br/>
<input type="submit" class="forsubmit" value="Log In">
</form>
</div>
<p>
Email entered is : {{emailid}}
</p>
在 .html 文件中，我们在方括号中使用了 formGroup 作为表单；例如，[formGroup]=”formdata”。提交时，调用该函数 点击提交 为此 formdata.value 已通过。
输入标签 表单控件名称 用来。它被赋予了我们在 app.component.ts file.
单击提交时，控件将传递给函数 点击提交 ，其定义在 app.component.ts file.
单击登录后，将显示该值，如上面的屏幕截图所示。
表单验证
现在让我们讨论使用模型驱动表单的表单验证。你可以使用内置的表单验证，也可以使用自定义验证方法。我们将在表格中使用这两种方法。我们将继续使用我们在前一部分中创建的相同示例。使用 Angular 4，我们需要从 @角/表单 如下所示：
import { FormGroup, FormControl, Validators} from '@angular/forms'
Angular 有内置的验证器，例如 必填字段，最小长度，最大长度 , and pattern .这些将使用 Validators 模块进行访问。
你可以只添加验证器或验证器数组来告诉 Angular 某个特定字段是否是必需的。
现在让我们在其中一个输入文本框(即电子邮件 ID)上尝试相同的操作。对于email id，我们添加了以下验证参数：
- Required
- 模式匹配
这就是代码在 app.component.ts .
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
In Validators.compose ，你可以在输入字段中添加要验证的内容列表。现在，我们添加了 required and the 模式匹配 参数只接受有效的电子邮件。
In the app.component.html ，如果任何表单输入无效，则提交按钮将被禁用。这样做如下：
<div>
<form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
formControlName = "emailid">
<br/>
<input type = "password" class = "fortextbox" name = "passwd"
placeholder = "passwd" formControlName = "passwd">
<br/>
<input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"
value = "Log In">
</form>
</div>
<p>
Email entered is : {{emailid}}
</p>
对于提交按钮，我们在方括号中添加了禁用，它被赋予了值 - !formdata.valid .因此，如果 formdata.valid 无效，按钮将保持禁用状态，用户将无法提交。
让我们看看它在浏览器中是如何工作的：
在上述情况下，输入的电子邮件 ID 无效，因此登录按钮被禁用。现在让我们尝试输入有效的电子邮件 ID 并查看差异。
现在，输入的电子邮件 ID 有效。因此，我们可以看到登录按钮已启用并且用户将能够提交它。这样，输入的电子邮件 ID 将显示在底部。
现在让我们尝试使用相同的表单进行自定义验证。对于自定义验证，我们可以定义自己的自定义函数并在其中添加所需的详细信息。我们现在将看到一个相同的例子。
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length <'; 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
在上面的例子中，我们创建了一个函数 密码验证 并且在 formcontrol 的上一节中使用了相同的 - passwd: new FormControl("", this.passwordvalidation) .
在我们创建的函数中，我们将检查输入的字符长度是否合适。如果字符少于五个，它将返回密码为 true，如上所示 - 返回 {"passwd" : true}; .如果字符多于五个，则认为有效并启用登录。
现在让我们看看它是如何在浏览器中显示的：
我们在密码中只输入了三个字符，登录被禁用。要启用登录，我们需要五个以上的字符。现在让我们输入一个有效的字符长度并检查。
登录已启用，因为电子邮件 ID 和密码均有效。当我们登录时，电子邮件显示在底部。