簡介

Angular 的 @angular/forms 包提供了一個(gè) Validators 類，支持諸如 required、minLength、maxLength 和 pattern 等有用的內(nèi)置驗(yàn)證器。然而，可能存在需要更復(fù)雜或自定義規(guī)則進(jìn)行驗(yàn)證的表單字段。在這種情況下，您可以使用自定義驗(yàn)證器。

在 Angular 中使用響應(yīng)式表單時(shí)，您可以使用函數(shù)定義自定義驗(yàn)證器。如果驗(yàn)證器不需要被重復(fù)使用，它可以直接存在于組件文件中作為一個(gè)函數(shù)。否則，如果驗(yàn)證器需要在其他組件中重復(fù)使用，它可以存在于一個(gè)單獨(dú)的文件中。

在本教程中，您將構(gòu)建一個(gè)帶有可重用自定義驗(yàn)證器的響應(yīng)式表單，以檢查 URL 是否符合特定條件。

先決條件

要完成本教程，您需要：

• 在本地安裝 Node.js，您可以按照《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》進(jìn)行操作。
• 一些關(guān)于設(shè)置 Angular 項(xiàng)目的基本知識(shí)。

本教程已經(jīng)在 Node v15.2.1、npm v6.14.8、@angular/core v11.0.0 和 @angular/forms v11.0.0 下進(jìn)行了驗(yàn)證。

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

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

npx @angular/cli new angular-reactive-forms-custom-validtor-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-custom-validator-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 – 構(gòu)建自定義驗(yàn)證器

本教程的示例自定義驗(yàn)證器將接受一個(gè) URL 字符串，并確保它以 https 協(xié)議開頭并以 .io 頂級(jí)域名結(jié)尾。

首先，在您的終端中，創(chuàng)建一個(gè) shared 目錄：

mkdir src/shared

然后，在這個(gè)新目錄中，創(chuàng)建一個(gè)新的 url.validator.ts 文件。在代碼編輯器中打開此文件并添加以下代碼：

import { AbstractControl } from '@angular/forms';

export function ValidateUrl(control: AbstractControl) {
  if (!control.value.startsWith('https') || !control.value.includes('.io')) {
    return { invalidUrl: true };
  }
  return null;
}

這段代碼使用了 AbstractControl 類，它是 FormControl、FormGroup 和 FormArray 的基類。這允許訪問 FormControl 的值。

這段代碼將檢查值是否以 https 字符串開頭。它還將檢查值是否包含 .io 字符串。

如果驗(yàn)證失敗，它將返回一個(gè)帶有錯(cuò)誤名稱 invalidUrl 和值 true 的對象。

否則，如果驗(yàn)證通過，它將返回 null。

到此為止，您的自定義驗(yàn)證器已經(jīng)準(zhǔn)備就緒。

步驟 3 – 使用自定義驗(yàn)證器

接下來，創(chuàng)建一個(gè)表單，其中包含 userName 和 websiteUrl。

打開 app.component.ts 并用以下代碼替換內(nèi)容：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { ValidateUrl } from '../shared/url.validator';

@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({
      userName: ['', Validators.required],
      websiteUrl: ['', [Validators.required, ValidateUrl]]
    });
  }

  saveForm(form: FormGroup) {
    console.log('Valid?', form.valid); // true or false
    console.log('Username', form.value.userName);
    console.log('Website URL', form.value.websiteUrl);
  }
}

在這段代碼中，websiteUrl 表單控件同時(shí)使用了內(nèi)置的 Validators.required 和自定義的 ValidateUrl 驗(yàn)證器。

第四步 – 訪問模板中的錯(cuò)誤信息

與您的表單交互的用戶需要了解哪些數(shù)值未通過驗(yàn)證。在組件模板中，您可以使用自定義驗(yàn)證器返回值中定義的鍵。

打開 app.component.html 并用以下代碼替換內(nèi)容：

<form [formGroup]="myForm" (ngSubmit)="saveForm(myForm)">
  <div>
    <label>
      用戶名：
      <input formControlName="userName" placeholder="您的用戶名">
    </label>
    <div *ngIf="(
                 myForm.get('userName').dirty ||
                 myForm.get('userName').touched
                ) &&
                myForm.get('userName').invalid"
    >
      請?zhí)峁┠挠脩裘?    </div>
  </div>
  <div>
    <label>
      網(wǎng)站 URL：
      <input formControlName="websiteUrl" placeholder="您的網(wǎng)站">
    </label>
    <div
      *ngIf="(
              myForm.get('websiteUrl').dirty ||
              myForm.get('websiteUrl').touched
             ) &&
             myForm.get('websiteUrl').invalid"
      >
      僅接受通過 HTTPS 提供且來自 .io 頂級(jí)域的 URL。
    </div>
  </div>
</form>

此時(shí)，您可以編譯您的應(yīng)用程序：

npm start

然后在您的網(wǎng)絡(luò)瀏覽器中打開它。您可以與 userName 和 websiteUrl 字段進(jìn)行交互。確保您的 ValidateUrl 的自定義驗(yàn)證器對于應(yīng)滿足 https 和 .io 條件的值（例如 https://example.io）能夠正常工作。

結(jié)論

在本文中，您為 Angular 應(yīng)用程序中的響應(yīng)式表單創(chuàng)建了一個(gè)可重用的自定義驗(yàn)證器。

要了解模板驅(qū)動(dòng)表單和響應(yīng)式表單中自定義驗(yàn)證器的示例，請參閱 Angular 中的自定義表單驗(yàn)證。

如果您想了解更多關(guān)于 Angular 的知識(shí)，請查看我們的 Angular 主題頁面，了解練習(xí)和編程項(xiàng)目。文章來源地址http://www.zghlxwxcb.cn/news/detail-835383.html

到了這里，關(guān)于如何在 Angular 中為響應(yīng)式表單創(chuàng)建自定義驗(yàn)證器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！