快捷導(dǎo)航

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

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

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

簡介

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

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

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

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

先決條件

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

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

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

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

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

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

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

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

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

進入新創(chuà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)有了一個使用 ReactiveFormsModule 的新的 Angular 項目。

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

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

在你的代碼編輯器中打開 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)建一個包含三個字段（name、email 和 message）的表單。還將有一個標簽為 “Send” 的 "submit" 按鈕。在提交表單時，將調(diào)用 onSubmit(myForm) 方法。

讓我們來分解一下：

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

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

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

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

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

注意 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 方法實際上并沒有將提交的表單值傳遞給任何外部服務(wù)或服務(wù)器。它用于展示你如何訪問表單的有效性和 FormControl 的值。

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

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

ngOnInit 中的表單構(gòu)建可以使用 FormBuilder 輔助程序進行重寫。這樣可以避免對表單組和表單控件進行 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ù)組中的第一個值是初始表單值，第二個值是要使用的驗證器。請注意，可以通過將它們包裝成數(shù)組來在同一個表單控件上使用多個驗證器。

在代碼編輯器中打開 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 個字符長。

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

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

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

打開 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）。然后，如果值未通過驗證要求，它將顯示錯誤消息。Send 按鈕也將在解決表單值的所有問題之前被禁用。

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

結(jié)論

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

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

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

您可能感興趣的文章: