Angular Forms 탐색: 신호를 사용한 새로운 대안

Angular Forms 탐색: 신호를 사용한 새로운 대안

Angular의 세계에서 간단한 로그인 페이지를 만들든 더 복잡한 사용자 프로필 인터페이스를 만들든 사용자 상호 작용에는 양식이 필수적입니다. Angular는 전통적으로 템플릿 기반 양식과 반응형 양식이라는 두 가지 기본 접근 방식을 제공합니다. Angular Reactive Forms에 대한 이전 시리즈에서는 반응형 양식의 기능을 활용하여 복잡한 논리를 관리하고, 동적 양식을 만들고, 사용자 정의 양식 컨트롤을 구축하는 방법을 탐구했습니다.

반응성을 관리하기 위한 새로운 도구인 신호는 Angular 버전 16에 도입되었으며 그 이후로 Angular 유지관리자의 초점이 되어 버전 17에서 안정화되었습니다. 신호를 사용하면 상태 변경을 처리할 수 있습니다. 선언적으로 템플릿 기반 양식의 단순성과 반응형 양식의 강력한 반응성을 결합한 흥미로운 대안을 제공합니다. 이 기사에서는 신호가 Angular의 단순 형식과 복잡한 형식 모두에 반응성을 추가할 수 있는 방법을 살펴보겠습니다.

요약: Angular Forms 접근 방식

신호로 템플릿 기반 양식을 향상시키는 주제를 다루기 전에 Angular의 전통적인 양식 접근 방식을 빠르게 요약해 보겠습니다.

1. 템플릿 기반 양식: ngModel과 같은 지시문을 사용하여 HTML 템플릿에서 직접 정의되는 이러한 양식은 설정이 쉽고 간단한 양식에 이상적입니다. 그러나 더 복잡한 시나리오에 필요한 세부적인 제어 기능을 제공하지 못할 수도 있습니다.

   다음은 템플릿 기반 양식의 최소한의 예입니다.
   

   <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. Reactive Forms: Angular의 FormGroup, FormControl 및 FormArray 클래스를 사용하여 구성 요소 클래스에서 프로그래밍 방식으로 관리됩니다. 반응형 양식은 양식 상태 및 유효성 검사에 대한 세부적인 제어를 제공합니다. 이 접근 방식은 Angular Reactive Forms에 대한 이전 기사에서 논의한 것처럼 복잡한 형식에 매우 적합합니다.

      다음은 반응형 형식의 최소한의 예입니다.
      

      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 });
     }
   }
   

   이 접근 방식은 단순한 형식에 적합하지만 신호를 도입하면 단순성을 유지하면서 반응 기능을 추가할 수 있습니다.
   

   // 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];
       });
     }
   }
   

   phoneNumbers 필드는 신호 배열의 신호로 정의됩니다. 이 구조를 사용하면 개별 전화번호의 변경 사항을 추적하고 양식 상태를 반응적으로 업데이트할 수 있습니다. addPhoneNumber 및 RemovePhoneNumber 메소드는 PhoneNumbers 신호 배열을 업데이트하여 양식의 반응성 업데이트를 트리거합니다.
   

   <!-- user-profile.comComponent.html -->
   
   
   
   
   <blockquote>
   <p>템플릿에서는 PhoneNumbers 신호 배열을 사용하여 전화번호 입력 필드를 동적으로 렌더링합니다. addPhoneNumber 및 RemovePhoneNumber 메소드를 사용하면 사용자가 반응적으로 전화번호를 추가하거나 제거하여 양식 상태를 업데이트할 수 있습니다. ngFor 지시문이 PhoneNumbers 배열의 변경 사항을 올바르게 추적하는지 확인하는 데 필요한 추적 기능의 사용법에 유의하세요.</p>
   </blockquote>
   
   <p>다음은 여러분이 가지고 놀 수 있는 복잡한 형식 예제의 StackBlitz 데모입니다.</p>
   
   <h3>
     
     
     신호로 양식 유효성 검사
   </h3>
   
   <p>검증은 제출하기 전에 사용자 입력이 필수 기준을 충족하는지 확인하는 모든 양식에 매우 중요합니다. 신호를 사용하면 유효성 검사를 반응적이고 선언적인 방식으로 처리할 수 있습니다. 위의 복잡한 양식 예에서는 모든 필드가 특정 유효성 검사 기준을 충족하는지 확인하는 formValid라는 계산된 신호를 구현했습니다.</p>
   
   <p>유효한 이메일 형식을 확인하거나 모든 필수 필드가 작성되었는지 확인하는 등 다양한 규칙을 수용하도록 유효성 검사 논리를 쉽게 사용자 정의할 수 있습니다. 유효성 검사를 위한 신호를 사용하면 유효성 검사 규칙이 명확하게 정의되고 양식 필드의 변경 사항에 자동으로 반응하므로 유지 관리 및 테스트가 더 쉬운 코드를 만들 수 있습니다. 다양한 형태에서 재사용이 가능하도록 별도의 유틸리티로 추상화할 수도 있습니다.</p>
   
   <p>복잡한 양식 예에서 formValid 신호는 모든 필수 필드가 채워졌는지 확인하고 이메일 및 전화번호 형식의 유효성을 검사합니다.</p>
   
   <p>이 유효성 검사 접근 방식은 약간 간단하며 실제 양식 필드에 더 잘 연결되어야 합니다. 많은 사용 사례에서 작동하지만 어떤 경우에는 명시적인 "신호 형식" 지원이 Angular에 추가될 때까지 기다리고 싶을 수도 있습니다. Tim Deschryver는 검증을 포함하여 신호 형식에 대한 몇 가지 추상화를 구현하기 시작했고 이에 대한 기사를 작성했습니다. 앞으로 Angular에도 이런 기능이 추가될지 지켜보겠습니다.</p>
   
   <h3>
     
     
     각도 형태의 신호를 사용하는 이유는 무엇입니까?
   </h3>
   
   <p>Angular의 신호 채택은 양식 상태와 반응성을 관리하는 강력하고 새로운 방법을 제공합니다. Signals는 템플릿 기반 양식과 반응형 양식의 장점을 결합하여 복잡한 양식 처리를 단순화할 수 있는 유연하고 선언적인 접근 방식을 제공합니다. Angular 형식의 신호를 사용하면 다음과 같은 몇 가지 주요 이점을 얻을 수 있습니다.</p>
   
   <ol>
   <li><p><strong>선언적 상태 관리</strong>: 신호를 사용하면 양식 필드와 계산된 값을 선언적으로 정의하여 코드를 더 예측 가능하고 이해하기 쉽게 만들 수 있습니다.</p></li>
   <li><p><strong>반응성</strong>: 신호는 양식 필드에 대한 반응성 업데이트를 제공하여 양식 상태의 변경 사항이 반응성 업데이트를 자동으로 트리거하도록 합니다.</p></li>
   <li><p><strong>세부적인 제어</strong>: 신호를 사용하면 세부적인 수준에서 양식 필드를 정의하여 양식 상태 및 유효성 검사를 세밀하게 제어할 수 있습니다.</p></li>
   <li><p><strong>동적 양식</strong>: 신호를 사용하면 동적으로 추가하거나 제거할 수 있는 필드가 포함된 동적 양식을 생성하여 복잡한 양식 시나리오를 처리하는 유연한 방법을 제공할 수 있습니다.</p></li>
   <li><p><strong>단순성</strong>: 신호는 기존 반응형 양식보다 양식 상태를 관리하는 더 간단하고 간결한 방법을 제공하여 복잡한 양식을 더 쉽게 구축하고 유지 관리할 수 있습니다.</p></li>
   </ol>
   
   <h3>
     
     
     결론
   </h3>
   
   <p>이전 기사에서는 동적 양식 구성부터 사용자 정의 양식 제어에 이르기까지 Angular 반응형 양식의 강력한 기능을 살펴보았습니다. 신호의 도입으로 Angular 개발자는 템플릿 기반 양식의 단순성과 반응형 양식의 반응성을 결합하는 새로운 도구를 갖게 되었습니다.</p>
   
   <p>많은 사용 사례에서 Reactive Forms가 필요하지만 Signal은 보다 간단하고 선언적인 접근 방식이 필요한 Angular 애플리케이션에서 양식 상태를 관리하기 위한 새롭고 강력한 대안을 제공합니다. Angular가 계속 발전함에 따라 이러한 새로운 기능을 실험하면 유지 관리가 용이하고 성능이 뛰어난 애플리케이션을 구축하는 데 도움이 될 것입니다.</p>
   
   <p>즐거운 코딩하세요!</p>
   
   
             
   
               
           

위 내용은 Angular Forms 탐색: 신호를 사용한 새로운 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!