探索角度形式：訊號(hào)的新替代方案

在 Angular 的世界中，無(wú)論您是在製作簡(jiǎn)單的登入頁(yè)面還是更複雜的使用者設(shè)定檔介面，表單對(duì)於使用者互動(dòng)都是至關(guān)重要的。 Angular 傳統(tǒng)上提供兩種主要方法：範(fàn)本驅(qū)動(dòng)表單和反應(yīng)式表單。在我之前的 Angular 反應(yīng)式表單系列中，我探索如何利用反應(yīng)式表單的強(qiáng)大功能來(lái)管理複雜邏輯、建立動(dòng)態(tài)表單以及建立自訂表單控制項(xiàng)。

用於管理反應(yīng)性的新工具 - 訊號(hào) - 已在 Angular 版本 16 中引入，此後一直是 Angular 維護(hù)人員關(guān)注的焦點(diǎn)，並在版本 17 中變得穩(wěn)定。訊號(hào)允許您處理狀態(tài)變更聲明性地，提供了一個(gè)令人興奮的替代方案，將範(fàn)本驅(qū)動(dòng)表單的簡(jiǎn)單性與反應(yīng)表單的強(qiáng)大反應(yīng)性結(jié)合起來(lái)。本文將研究訊號(hào)如何為 Angular 中的簡(jiǎn)單和複雜形式添加反應(yīng)性。

回顧：角度形式方法

在深入探討使用訊號(hào)增強(qiáng)範(fàn)本驅(qū)動(dòng)表單的主題之前，讓我們先快速回顧一下 Angular 的傳統(tǒng)表單方法：

1. 模板驅(qū)動(dòng)表單：使用 ngModel 等指令直接在 HTML 範(fàn)本中定義，這些表單易於設(shè)置，非常適合簡(jiǎn)單表單。但是，它們可能無(wú)法提供更複雜場(chǎng)景所需的細(xì)微控制。

   這是範(fàn)本驅(qū)動(dòng)表單的最小範(fàn)例：
   

   <form (ngSubmit)="onSubmit()">
     <label for="name">Name:</label>
     <input>
   
   </li>
   </ol>
   
   
   
   <pre class="brush:php;toolbar:false">```typescript
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent {
     name = '';
   
     onSubmit() {
       console.log(this.name);
     }
   }
   ```
   

   1. 反應(yīng)式表單：使用 Angular 的 FormGroup、FormControl 和 FormArray 類(lèi)別在元件類(lèi)別中以程式設(shè)計(jì)方式進(jìn)行管理；反應(yīng)式表單提供對(duì)表單狀態(tài)和驗(yàn)證的精細(xì)控制。正如我之前關(guān)於 Angular Reactive Forms 的文章所討論的那樣，這種方法非常適合複雜的表單。

      這是一個(gè)反應(yīng)式形式的最小範(fàn)例：
      

      import { Component } from '@angular/core';
      import { FormGroup, FormControl } from '@angular/forms';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
      })
      export class AppComponent {
        form = new FormGroup({
          name: new FormControl('')
        });
      
        onSubmit() {
          console.log(this.form.value);
        }
      }
      

   ```html
   <form [formGroup]="form" (ngSubmit)="onSubmit()">
     <label for="name">Name:</label>
     <input>
   
   
   
   <h2>
     
     
     Introducing Signals as a New Way to Handle Form Reactivity
   </h2>
   
   <p>With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms.</p>
   
   <p>Let’s explore how signals can be used in both simple and complex form scenarios.</p>
   
   <h3>
     
     
     Example 1: A Simple Template-Driven Form with Signals
   </h3>
   
   <p>Consider a basic login form. Typically, this would be implemented using template-driven forms like this:<br>
   </p>
   
   <pre class="brush:php;toolbar:false"><!-- login.component.html -->
   <form name="form" (ngSubmit)="onSubmit()">
     <label for="email">E-mail</label>
     <input type="email">
   
   
   
   
   
   <pre class="brush:php;toolbar:false">// login.component.ts
   import { Component } from "@angular/core";
   
   @Component({
     selector: "app-login",
     templateUrl: "./login.component.html",
   })
   export class LoginComponent {
     public email: string = "";
     public password: string = "";
   
     onSubmit() {
       console.log("Form submitted", { email: this.email, password: this.password });
     }
   }
   

   這種方法適用於簡(jiǎn)單的表單，但是透過(guò)引入訊號(hào)，我們可以在添加反應(yīng)功能的同時(shí)保持簡(jiǎn)單性：
   

   // login.component.ts
   import { Component, computed, signal } from "@angular/core";
   import { FormsModule } from "@angular/forms";
   
   @Component({
     selector: "app-login",
     standalone: true,
     templateUrl: "./login.component.html",
     imports: [FormsModule],
   })
   export class LoginComponent {
     // Define signals for form fields
     public email = signal("");
     public password = signal(""); // Define a computed signal for the form value
   
     public formValue = computed(() => {
       return {
         email: this.email(),
         password: this.password(),
       };
     });
   
     public isFormValid = computed(() => {
       return this.email().length > 0 && this.password().length > 0;
     });
   
     onSubmit() {
       console.log("Form submitted", this.formValue());
     }
   }
   

   <!-- login.component.html -->
   <form name="form" (ngSubmit)="onSubmit()">
     <label for="email">E-mail</label>
     <input type="email">
   
   
   
   <p>In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals.</p>
   
   <p>You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue:</p>
   
   <p>Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. </p>
   
   <h3>
     
     
     Example 2: A Complex Form with Signals
   </h3>
   
   <p>You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed.</p>
   
   <p>Here's how this form might be defined using signals:<br>
   </p>
   
   <pre class="brush:php;toolbar:false">// user-profile.component.ts
   import { JsonPipe } from "@angular/common";
   import { Component, computed, signal } from "@angular/core";
   import { FormsModule, Validators } from "@angular/forms";
   
   @Component({
     standalone: true,
     selector: "app-user-profile",
     templateUrl: "./user-profile.component.html",
     styleUrls: ["./user-profile.component.scss"],
     imports: [FormsModule, JsonPipe],
   })
   export class UserProfileComponent {
     public firstName = signal("");
     public lastName = signal("");
     public email = signal(""); 
     // We need to use a signal for the phone numbers, so we get reactivity when typing in the input fields
     public phoneNumbers = signal([signal("")]);
     public street = signal("");
     public city = signal("");
     public state = signal("");
     public zip = signal("");
   
     public formValue = computed(() => {
       return {
         firstName: this.firstName(),
         lastName: this.lastName(),
         email: this.email(), // We need to do a little mapping here, so we get the actual value for the phone numbers
         phoneNumbers: this.phoneNumbers().map((phoneNumber) => phoneNumber()),
         address: {
           street: this.street(),
           city: this.city(),
           state: this.state(),
           zip: this.zip(),
         },
       };
     });
   
     public formValid = computed(() => {
       const { firstName, lastName, email, phoneNumbers, address } = this.formValue(); // Regex taken from the Angular email validator
   
       const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
       const isEmailFormatValid = EMAIL_REGEXP.test(email);
   
       return (
         firstName.length > 0 &&
         lastName.length > 0 &&
         email.length > 0 &&
         isEmailFormatValid &&
         phoneNumbers.length > 0 && // Check if all phone numbers are valid
         phoneNumbers.every((phoneNumber) => phoneNumber.length > 0) &&
         address.street.length > 0 &&
         address.city.length > 0 &&
         address.state.length > 0 &&
         address.zip.length > 0
       );
     });
   
     addPhoneNumber() {
       this.phoneNumbers.update((phoneNumbers) => {
         phoneNumbers.push(signal(""));
         return [...phoneNumbers];
       });
     }
   
     removePhoneNumber(index: number) {
       this.phoneNumbers.update((phoneNumbers) => {
         phoneNumbers.splice(index, 1);
         return [...phoneNumbers];
       });
     }
   }
   

   請(qǐng)注意，phoneNumbers 欄位被定義為訊號(hào)數(shù)組中的一個(gè)訊號(hào)。這種結(jié)構(gòu)使我們能夠追蹤各個(gè)電話號(hào)碼的變更並反應(yīng)性地更新表單狀態(tài)。 addPhoneNumber 和removePhoneNumber 方法更新phoneNumbers 訊號(hào)數(shù)組，觸發(fā)表單中的反應(yīng)性更新。
   

   <!-- user-profile.component.html -->
   
   
   
   
   <blockquote>
   <p>在範(fàn)本中，我們使用phoneNumbers訊號(hào)陣列來(lái)動(dòng)態(tài)渲染電話號(hào)碼輸入欄位。 addPhoneNumber 和removePhoneNumber 方法允許使用者反應(yīng)性地新增或刪除電話號(hào)碼，從而更新表單狀態(tài)。請(qǐng)注意 track 函數(shù)的用法，這是確保 ngFor 指令正確追蹤phoneNumbers 陣列變更所必需的。 </p>
   </blockquote>
   
   <p>這是複雜表單範(fàn)例的 StackBlitz 演示，供您試用：</p>
   
   <h3>
     
     
     使用訊號(hào)驗(yàn)證表單
   </h3>
   
   <p>驗(yàn)證對(duì)於任何表單都至關(guān)重要，確保使用者輸入在提交之前符合所需的標(biāo)準(zhǔn)。使用訊號(hào)，可以以反應(yīng)性和聲明性的方式處理驗(yàn)證。在上面的複雜表單範(fàn)例中，我們實(shí)作了一個(gè)名為 formValid 的計(jì)算訊號(hào)，它檢查所有欄位是否符合特定的驗(yàn)證標(biāo)準(zhǔn)。 </p>
   
   <p>可以輕鬆自訂驗(yàn)證邏輯以適應(yīng)不同的規(guī)則，例如檢查有效的電子郵件格式或確保填寫(xiě)所有必填欄位。使用訊號(hào)進(jìn)行驗(yàn)證可以讓您建立更多可維護(hù)和可測(cè)試的程式碼，因?yàn)轵?yàn)證規(guī)則被明確定義並自動(dòng)對(duì)表單欄位中的變更做出反應(yīng)。它甚至可以被抽象化為單獨(dú)的實(shí)用程序，以使其可以在不同形式中重複使用。 </p>
   
   <p>在複雜表單範(fàn)例中，formValid 訊號(hào)可確保填寫(xiě)所有必填欄位並驗(yàn)證電子郵件和電話號(hào)碼格式。 </p>
   
   <p>這種驗(yàn)證方法有點(diǎn)簡(jiǎn)單，需要更好地連接到實(shí)際的表單欄位。雖然它適用於許多用例，但在某些情況下，您可能需要等到 Angular 中添加明確「訊號(hào)形式」支援。 Tim Deschryver 開(kāi)始實(shí)現(xiàn)一些圍繞著訊號(hào)形式的抽象，包括驗(yàn)證，並寫(xiě)了一篇關(guān)於它的文章。讓我們看看將來(lái) Angular 中是否會(huì)添加這樣的東西。 </p>
   
   <h3>
     
     
     為什麼要使用角度形式的訊號(hào)？
   </h3>
   
   <p>Angular 中訊號(hào)的採(cǎi)用提供了一種強(qiáng)大的新方法來(lái)管理表單狀態(tài)和反應(yīng)性。訊號(hào)提供了一種靈活的聲明性方法，可以透過(guò)結(jié)合模板驅(qū)動(dòng)表單和反應(yīng)式表單的優(yōu)勢(shì)來(lái)簡(jiǎn)化複雜的表單處理。以下是使用 Angular 形式的訊號(hào)的一些主要好處：</p>
   
   <ol>
   <li><p><strong>聲明式狀態(tài)管理</strong>：訊號(hào)可讓您以聲明方式定義表單欄位和計(jì)算值，讓您的程式碼更可預(yù)測(cè)且更易於理解。 </p></li>
   <li><p><strong>反應(yīng)性</strong>：訊號(hào)為表單欄位提供反應(yīng)性更新，確保表單狀態(tài)的變更自動(dòng)觸發(fā)反應(yīng)性更新。 </p></li>
   <li><p><strong>粒度控制</strong>：訊號(hào)可讓您在粒度層級(jí)定義表單字段，從而實(shí)現(xiàn)對(duì)表單狀態(tài)和驗(yàn)證的細(xì)粒度控制。 </p></li>
   <li><p><strong>動(dòng)態(tài)表單</strong>：訊號(hào)可用於建立具有可動(dòng)態(tài)新增或刪除欄位的動(dòng)態(tài)表單，提供靈活的方式來(lái)處理複雜的表單場(chǎng)景。 </p></li>
   <li><p><strong>簡(jiǎn)單性</strong>：與傳統(tǒng)的反應(yīng)式表單相比，訊號(hào)可以提供更簡(jiǎn)單、更簡(jiǎn)潔的方式來(lái)管理表單狀態(tài)，使建置和維護(hù)複雜表單變得更加容易。 </p></li>
   </ol>
   
   <h3>
     
     
     結(jié)論
   </h3>
   
   <p>在我之前的文章中，我們探索了 Angular 反應(yīng)式表單的強(qiáng)大功能，從動(dòng)態(tài)表單建置到自訂表單控制項(xiàng)。隨著訊號(hào)的引入，Angular 開(kāi)發(fā)人員擁有了一種新工具，它將模板驅(qū)動(dòng)表單的簡(jiǎn)單性與反應(yīng)式表單的反應(yīng)性融為一體。 </p>
   
   <p>雖然許多用例都需要反應(yīng)式表單，但訊號(hào)為需要更直接、聲明性方法的 Angular 應(yīng)用程式中的表單狀態(tài)管理提供了一種全新、強(qiáng)大的替代方案。隨著 Angular 的不斷發(fā)展，嘗試這些新功能將幫助您建立更易於維護(hù)、性能更高的應(yīng)用程式。 </p>
   
   <p>編碼愉快！ </p>
   
   
             
   
               
           

以上是探索角度形式：訊號(hào)的新替代方案的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！