快捷導(dǎo)航

Angular中使用響應(yīng)式表單的詳細(xì)步驟

更新時(shí)間：2024年02月29日 10:39:10 作者：白如意i

Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱為模型驅(qū)動(dòng)表單）,使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序

簡介
先決條件
步驟 1 —— 設(shè)置項(xiàng)目
步驟 2 —— 向組件模板添加表單
步驟 3 —— 構(gòu)建組件類
第四步 — 更新組件類以使用 FormBuilder
第五步 — 更新組件類以使用 Validators
第六步 — 在模板中訪問表單值和有效性
結(jié)論

簡介

Angular 提供了兩種處理表單的方式：模板驅(qū)動(dòng)表單和響應(yīng)式表單（也稱為模型驅(qū)動(dòng)表單）。模板驅(qū)動(dòng)表單是在 Angular 中處理表單的默認(rèn)方式。使用模板驅(qū)動(dòng)表單時(shí)，模板指令被用來構(gòu)建表單的內(nèi)部表示。而使用響應(yīng)式表單時(shí)，你需要在組件類中構(gòu)建自己的表單表示。

以下是響應(yīng)式表單的一些優(yōu)勢：

使用自定義驗(yàn)證器
動(dòng)態(tài)改變驗(yàn)證規(guī)則
動(dòng)態(tài)添加表單字段

在本文中，你將探索如何將響應(yīng)式表單應(yīng)用到一個(gè)示例 Angular 應(yīng)用程序中。

先決條件

如果你想跟著本文操作，你需要：

本地安裝 Node.js，你可以按照《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》進(jìn)行操作。

本文假設(shè)你具有一些 Angular 的基礎(chǔ)知識(shí)。

本文還假設(shè)你是在使用 @angular/cli 生成的全新 Angular 項(xiàng)目進(jìn)行構(gòu)建。如果你剛開始使用 Angular CLI，你可以參考本文。

本教程經(jīng)過 Node v15.1.0、npm v6.14.8、@angular/core v11.0.0 和 @angular/forms v11.0.0 的驗(yàn)證。

步驟 1 —— 設(shè)置項(xiàng)目

為了本教程的目的，你將從使用 @angular/cli 生成的默認(rèn) Angular 項(xiàng)目開始構(gòu)建。

npx @angular/cli new angular-reactive-forms-example --style=css --routing=false --skip-tests

這將配置一個(gè)新的 Angular 項(xiàng)目，其中樣式設(shè)置為 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），沒有路由，并且跳過了測試。

進(jìn)入新創(chuàng)建的項(xiàng)目目錄：

cd angular-reactive-forms-example

為了使用響應(yīng)式表單，你將使用 ReactiveFormsModule 而不是 FormsModule。

在你的代碼編輯器中打開 app.module.ts 并添加 ReactiveFormsModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

到此為止，你應(yīng)該已經(jīng)有了一個(gè)使用 ReactiveFormsModule 的新的 Angular 項(xiàng)目。

步驟 2 —— 向組件模板添加表單

使用響應(yīng)式表單時(shí)，邏輯完全在組件類中聲明。

在你的代碼編輯器中打開 app.component.html 并添加以下代碼：

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label>
      Name:
      <input formControlName="name" placeholder="Your name">
    </label>
  </div>
  <div>
    <label>
      Email:
      <input formControlName="email" placeholder="Your email">
    </label>
  </div>
  <div>
    <label>
      Message:
      <input formControlName="message" placeholder="Your message">
    </label>
  </div>
  <button type="submit">Send</button>
</form>

這段代碼將創(chuàng)建一個(gè)包含三個(gè)字段（name、email 和 message）的表單。還將有一個(gè)標(biāo)簽為 “Send” 的 "submit" 按鈕。在提交表單時(shí)，將調(diào)用 onSubmit(myForm) 方法。

讓我們來分解一下：

formGroup：表單將在組件類中被視為 FormGroup，因此 formGroup 指令允許給表單組指定一個(gè)名稱。
ngSubmit：這是在提交表單時(shí)觸發(fā)的事件。
formControlName：每個(gè)表單字段應(yīng)該有一個(gè) formControlName 指令，其值將在組件類中使用。

到此為止，你應(yīng)該已經(jīng)有了一個(gè)使用表單的組件模板。

步驟 3 —— 構(gòu)建組件類

接下來，在組件類中，你將定義 FormGroup 和 FormGroup 內(nèi)的各個(gè) FormControl。

如果在 newing FormControl 時(shí)提供了一個(gè)值，它將被用作字段的初始值。

注意 FormGroup 和 FormControl 的名稱與模板中使用的名稱相同。還要注意你如何在 ngOnInit 生命周期鉤子中初始化 FormGroup：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;
  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('Sammy'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }
  onSubmit(form: FormGroup) {
    console.log('Valid?', form.valid); // true or false
    console.log('Name', form.value.name);
    console.log('Email', form.value.email);
    console.log('Message', form.value.message);
  }
}

在本教程中，onSubmit 方法實(shí)際上并沒有將提交的表單值傳遞給任何外部服務(wù)或服務(wù)器。它用于展示你如何訪問表單的有效性和 FormControl 的值。

到此為止，你可以編譯你的應(yīng)用程序并在 web 瀏覽器中打開它。在為 name、email 和 message 輸入值并點(diǎn)擊 Submit 后，控制臺(tái)日志將顯示這些值。

第四步 — 更新組件類以使用 FormBuilder

ngOnInit 中的表單構(gòu)建可以使用 FormBuilder 輔助程序進(jìn)行重寫。這樣可以避免對表單組和表單控件進(jìn)行 newing。

在代碼編輯器中打開 app.component.ts，移除 FormControl 并用 FormBuilder 替換 FormGroup：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.fb.group({
      name: 'Sammy',
      email: '',
      message: ''
    });
  }
  onSubmit(form: FormGroup) {
    console.log('Valid?', form.valid); // true or false
    console.log('Name', form.value.name);
    console.log('Email', form.value.email);
    console.log('Message', form.value.message);
  }
}

使用 FormBuilder 的這段代碼減少了創(chuàng)建 FormGroup 的樣板代碼。

第五步 — 更新組件類以使用 Validators

將 Validators 類添加到你的導(dǎo)入中，并使用數(shù)組而不是簡單的字符串值來聲明表單控件。

數(shù)組中的第一個(gè)值是初始表單值，第二個(gè)值是要使用的驗(yàn)證器。請注意，可以通過將它們包裝成數(shù)組來在同一個(gè)表單控件上使用多個(gè)驗(yàn)證器。

在代碼編輯器中打開 app.component.ts，添加 Validators：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['Sammy', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', [Validators.required, Validators.minLength(15)]],
    });
  }
  onSubmit(form: FormGroup) {
    console.log('Valid?', form.valid); // true or false
    console.log('Name', form.value.name);
    console.log('Email', form.value.email);
    console.log('Message', form.value.message);
  }
}

這段代碼為 name、email 和 message 字段添加了 required。它還確保 email 值使用有效電子郵件地址的格式。它還確保 message 值至少為 15 個(gè)字符長。

如果這些表單要求中的任何一個(gè)未通過，valid 值將為 false。如果所有這些表單要求都通過，valid 值將為 true。

第六步 — 在模板中訪問表單值和有效性

在模板中，可以訪問每個(gè) FormControl 的值和有效性，以及整個(gè)表單組的值和有效性。

打開 app.component.html，使用 *ngIf 來顯示反饋消息，告訴用戶表單值無效：

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label>
      Name:
      <input formControlName="name" placeholder="Your name">
    </label>
    <div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
      Please provide a name.
    </div>
  </div>
  <div>
    <label>
      Email:
      <input formControlName="email" placeholder="Your email">
    </label>
    <div *ngIf="myForm.get('email').invalid && (myForm.get('email').dirty || myForm.get('email').touched)">
      Please provide a valid email address.
    </div>
  </div>
  <div>
    <label>
      Message:
      <input formControlName="message" placeholder="Your message">
    </label>
    <div *ngIf="myForm.get('message').invalid && (myForm.get('message').dirty || myForm.get('message').touched)">
      Messages must be at least 15 characters long.
    </div>
  </div>
  <button type="submit" [disabled]="myForm.invalid">Send</button>
</form>

這段代碼檢查用戶是否與字段交互（dirty 或 touched）。然后，如果值未通過驗(yàn)證要求，它將顯示錯(cuò)誤消息。Send 按鈕也將在解決表單值的所有問題之前被禁用。

有多種方法可以檢索表單控件的值。此示例使用 myForm.get('name')，它等同于 myForm.controls.name?？梢允褂?.hasError('required') 或 .errors.required 檢索錯(cuò)誤信息。

結(jié)論

在本文中，您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序。您使用了 FormControl、FormGroup、FormBuilder 和 Validators 來構(gòu)建一個(gè)帶有驗(yàn)證的示例表單。如需了解更多功能，請參考官方文檔。

如果您想了解更多關(guān)于 Angular 的知識(shí)，請查看我們的 Angular 專題頁面，了解相關(guān)練習(xí)和編程項(xiàng)目。

到此這篇關(guān)于如何在 Angular 中使用響應(yīng)式表單的文章就介紹到這了,更多相關(guān) Angular 響應(yīng)式表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: