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 ??? ????? ?? ?? ??? ?????!