• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

使用响应式和模板驱动的表单进行Angular表单验证

ngkoma • 2年前 (2022-05-25) • JavaScript

在本教程中，我们将探索angular 中的反应式和模板驱动表单。您将看到如何创建每种类型以及如何在 Angular 6 中执行验证。

反应式和模板驱动的表单

什么是 Angular 反应形式？

反应式表单也称为模型驱动表单。这意味着 html 内容会根据组件中的代码而变化。

什么是 Angular 模板驱动的表单？

模板驱动的表单由模板中的衍生产品驱动。这意味着您将 ngModel在模板中看到衍生产品，而不是代码。 

模板驱动和响应式表单之间的差异

  • 模板驱动的表单使用FormsModule，而反应式表单使用 reactiveFormsModule.

  • 模板驱动的表单是异步的，而响应式表单是同步的。

  • 在模板驱动的表单中，大部分交互发生在模板中，而在响应式驱动的表单中，大部分交互发生在组件中。

模板驱动表单的优缺点

尽管模板表单更容易创建，但是当您想要进行单元测试时它们会成为一个挑战，因为测试需要存在dom。

反应形式的优缺点

由于所有表单代码和功能都包含在组件中，因此以响应式表单编写单元测试更容易。但是，响应式表单需要在组件中进行更多的编码实现。

创建和验证 Angular 表单

在本节中，我们将了解如何创建和验证这两种表单。在这两种表单中，我们都将创建一个联系表单，用户可以在其中提交数据。我们将首先创建一个包含两个组件的 Angular 应用程序，如下所示：

ng new angularforms
ng generate component reactiveforms
ng generate component templateforms

如何创建模板表单

基本表单模板如下：

<mat-card class="contact-card">
  <mat-card-header>
    <mat-card-title>Template Form</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form novalidate >
    <mat-form-field>
      <input matInput placeholder="firstname"  class="form-control"  name="firstname">
      
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="lastname" class="form-control"  name="lastname">
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="email" class="form-control"  name="email">
    </mat-form-field>
    <br>
    <mat-form-field>
      <textarea rows="4" cols="50" matInput placeholder="message" class="form-control"  name="message" ></textarea>
    </mat-form-field>
    <br>
    <button id="submit" mat-raised-button type="submit" color="primary">Submit</button>

    </form>
  </mat-card-content>
</mat-card>

接下来，我们将向ngModel所有字段添加导数，如图所示。这是将输入字段绑定到数据模型属性所必需的。

<mat-form-field>
  <input matInput placeholder="firstname"  class="form-control"  name="firstname" ngModel>
</mat-form-field>
<br>
<mat-form-field>
  <input matInput placeholder="lastname" class="form-control"  name="lastname" ngModel>
</mat-form-field>
<br>
<mat-form-field>
  <input matInput placeholder="email" class="form-control"  name="email" ngModel>
</mat-form-field>
<br>
<mat-form-field>
  <textarea rows="4" cols="50" matInput placeholder="message" class="form-control"  name="message" ngModel></textarea>
</mat-form-field>

然后我们添加 ngForm 和ngSubmit导数。 ngForm当用户单击提交按钮时激活，同时 ngSubmit 指定提交表单时要运行的函数。

<form novalidate (ngSubmit)="onSubmit()" #f="ngForm">
  ..
</form>

然后我们将 在 app.module.tsFormsModule中导入from  以激活模板驱动的表单。@angular/forms 

import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当用户输入并提交数据并点击提交按钮时，我们需要在组件类中接收数据。在这里，我们只是将结果记录到控制台。

onSubmit(f) {
        console.log(f.value);
    }

您还可以在向表单输入值时实时查看提交的数据。

    <strong>{{f.value.firstname}} </strong>
    <strong>{{f.value.lastname}} </strong>
    <strong>{{f.value.email}} </strong>
    <strong>{{f.value.message}} </strong></form>

我们的表单现已完成，您可以通过导航到 http://localhost:4200/template开始测试。

使用响应式和模板驱动的表单进行Angular表单验证 第1张

Angular 模板表单验证

让我们看看如何向表单添加高级功能，例如验证。在这种情况下，我们将使用一些内置的验证器，包括：

  • required— 表单控件不应有空字段。

  • minlength——表单控件应该有一个指定的最小长度的值。

  • maxlength——表单控件应该有一个指定最大长度的值。

  • pattern— 表单控件值应匹配给定的正则表达式值。

 我们将从将required属性添加到所有输入字段开始。

 <input matInput placeholder="firstname" class="form-control" name="firstname" ngModel required>
 <input matInput placeholder="lastname" class="form-control" name="lastname" ngModel required>
 <input matInput placeholder="email" class="form-control" name="email" ngModel required>
 <textarea rows="4" cols="50" matInput placeholder="message" class="form-control" name="message" ngModel required>
 </textarea>

提交按钮将通过使用属性进行验证，如果表单有效 ，该disabled属性将设置为。true

<button type="submit" [disabled]="f.invalid">提交</button>

我们的工作表格现在应该如下所示。如您所见，如果所有字段都未填写，则提交按钮被禁用，并且这些字段也标有星号以表明它们是强制性的。

使用响应式和模板驱动的表单进行Angular表单验证 第2张

创建 Angular 响应式表单

Angular 反应形式也称为模型驱动形式。他们采用一种技术，在组件中设计表单，然后为 HTML 完成绑定。他们还利用 ReactiveFormsModule 模块中可用的以下类。

  • FormGroup 

  • FormControl

  • FormBuilder 

我们只需要 FormBuilder api来创建我们的表单，因为我们的表单并不复杂。我们将从在组件类中导入模块开始。

import {FormBuilder} from '@angular/forms'

这FormBuilder使得搭建脚手架变得容易，尤其是在构建复杂表单时。我们将使用 group() 可用的方法FormBuilder来创建 FormGroup 实例，然后将表单控件添加为对象。

然后我们将通过依赖注入将其注入构造函数中。

export class ReactiveformsComponent implements OnInit {


  constructor(private formBuilder: FormBuilder){
   
  }
}

现在让我们使用它  FormBuilder来构建我们的表单模型。将reactiveforms.component.ts更新为如下所示：

export class ReactiveformsComponent implements OnInit {
  form;

  constructor(private formBuilder: FormBuilder){
    this.form = formBuilder.group({
      firstname: [''],
      lastname: [''],
      email: ['',
      message: [''],

    });
  }

  ngOnInit() {
  }
}

在上面的代码中，我们使用 FormBuilderAPI 并将我们的表单字段添加到一个对象中。我们现在可以像常规表单一样实现模板。唯一的区别是我们需要告诉 AngularformGroup使用哪个。

<mat-card class="contact-card">
  <mat-card-header>
    <mat-card-title>Reactive Form</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form id="contactForm" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <input matInput placeholder="firstname" class="form-control"  name="firstname">
      
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="lastname" class="form-control"  name="lastname">
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="email" class="form-control"  name="email">
    </mat-form-field>
    <br>
    <mat-form-field>
      <textarea rows="4" cols="50" matInput placeholder="message" class="form-control"  name="message"></textarea>
    </mat-form-field>
    <br>
    <button id="btnSubmit" mat-raised-button type="submit" color="primary">Submit</button>
    </form>
  </mat-card-content>
</mat-card>
<strong>{{form.value.firstname}} </strong>
<br>
<strong>{{form.value.lastname}} </strong>
<br>
<strong>{{form.value.email}} </strong>
<br>
<strong>{{form.value.message}} </strong>

最后一点是实现决定提交表单时会发生什么的函数。

export class ReactiveformsComponent implements OnInit {

  ngOnInit() {
  }

  submit() {
    if (this.form.valid) {
      console.log(this.form.value)
    }
    else{
      alert("FILL ALL FIELDS")
    }
  }
}

现在我们的表格已经完成，我们可以开始测试了。导航到 http://localhost:4200/reactive，当您为输入字段键入值时，这些值应显示在表单下方，如下所示。


使用响应式和模板驱动的表单进行Angular表单验证 第3张

Angular 中的反应式表单验证

我们仍然需要在表单中添加验证，以确保用户不会留下空白字段或输入错误的数据格式。 

Validators我们将首先在组件中导入模块。然后将模块添加到formGroup字段中。

 constructor(private formBuilder: FormBuilder){
    this.form = formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', Validators.required],

    });
  }

我们希望我们的所有字段都是强制性的，因此我们将使用标签更新我们的字段，该 formControlName 标签会监听控件值的变化。 

<form id="contactForm" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <input matInput placeholder="firstname" formControlName="firstname" class="form-control" name="firstname">
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="lastname" formControlName="lastname" class="form-control" name="lastname">
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="email" formControlName="email" class="form-control" name="email">
    </mat-form-field>
    <br>
    <mat-form-field>
      <textarea rows="4" cols="50" matInput placeholder="message" formControlName="message" class="form-control" name="message"></textarea>
    </mat-form-field>
    <br>
    <button id="btnSubmit" mat-raised-button type="submit" color="primary">提交</button>
    </form>

仅此而已！我们的 Angular 反应式表单验证现在正在工作，如下所示。

使用响应式和模板驱动的表单进行Angular表单验证 第4张

结论

本教程涵盖了创建和验证 Angular 表单的所有基础知识。尝试一下，也许您甚至会想要创建自己的自定义验证。 


文章目录
  • 反应式和模板驱动的表单
      • 什么是 Angular 反应形式？
      • 什么是 Angular 模板驱动的表单？
      • 模板驱动和响应式表单之间的差异
      • 模板驱动表单的优缺点
      • 反应形式的优缺点
  • 创建和验证 Angular 表单
    • 如何创建模板表单
    • Angular 模板表单验证
    • 创建 Angular 响应式表单
    • Angular 中的反应式表单验证
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：使用响应式和模板驱动的表单进行Angular表单验证
    文章地址：https://www.weixiaolive.com/en/index.php/post/101.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云