رسیدگی به ارسال فرم در Angular با مثال

رسیدگی به ارسال فرم در Angular با مثال

فرم ها بخشی جدایی ناپذیر از هر برنامه وب هستند و Angular مجموعه ای قوی از API ها را برای مدیریت آسان فرم ها ارائه می دهد. در این مقاله، نحوه رسیدگی به ارسال فرم در Angular را بررسی خواهیم کرد و مثال‌های عملی از نحوه پیاده‌سازی فرم‌ها در برنامه Angular ارائه می‌کنیم.

نمای کلی فرم های زاویه ای

Angular دو نوع فرم را برای مدیریت ورودی کاربر ارائه می دهد. اولین مورد مبتنی بر الگو است که برای مدیریت ورودی فرم به اتصال داده های دو طرفه و دستورالعمل ها متکی است. دوم فرم های واکنشی است که رویکردی انعطاف پذیرتر و مقیاس پذیرتر برای مدیریت ورودی کاربر است.

در فرم های الگو محور، ngForm دستورالعمل برای ایجاد گروه فرم و ngModel برای اتصال کنترل های فرم به مقادیر ورودی استفاده می شود. از طرف دیگر، فرم های واکنشی از FormGroup و FormControl کلاس ها برای ایجاد یک گروه فرم ساختار یافته تر و کنترل های فرم فردی.

رسیدگی به ارسال فرم در Angular

رسیدگی به ارسال فرم در Angular با استفاده از (ngSubmit) رویداد. این رویداد زمانی که یک فرم ارسال می‌شود فعال می‌شود و به توسعه‌دهندگان اجازه می‌دهد تا داده‌های فرم را به روشی ساختاریافته مدیریت کنند.

بیایید با ایجاد یک فرم مبتنی بر الگو در Angular شروع کنیم:

<form (ngSubmit)="onSubmit()">
  <label>Name:</label>
  <input type="text" name="name" [(ngModel)]="user.name">
  <label>Email:</label>
  <input type="email" name="email" [(ngModel)]="user.email">
  <button type="submit">Submit</button>
</form>

در این مثال، ما یک فرم ساده داریم که نام کاربری و آدرس ایمیل را جمع آوری می کند. هنگامی که فرم ارسال می شود، onSubmit() روش نامیده می شود:

onSubmit() {
  console.log(this.user);
}

این روش به سادگی داده های فرم را در کنسول ثبت می کند. اگر ما در حال ساخت یک برنامه کامل بودیم، احتمالاً نوعی تماس API یا دستکاری داده ها را در اینجا انجام می دادیم.

فرم های واکنشی از رویکرد مشابهی برای رسیدگی به ارسال فرم استفاده می کنند:

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label>Name:</label>
      <input type="text" formControlName="name">
      <label>Email:</label>
      <input type="email" formControlName="email">
      <button type="submit">Submit</button>
    </form>
  `
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

در این مثال، ابتدا آن را وارد می کنیم FormBuilder، FormGroup، و Validators کلاس ها از @angular/forms. سپس ما ایجاد می کنیم userForm با استفاده از FormBuilder و تعریف کنید name و email کنترل ها را با اعتباردهنده های مربوطه تشکیل می دهند.

هنگامی که فرم ارسال می شود، onSubmit() متد فراخوانی می شود که داده های فرم را در کنسول ثبت می کند.

اعتبار سنجی در فرم های زاویه ای

اعتبار سنجی در فرم های Angular جنبه مهمی برای اطمینان از معتبر بودن ورودی کاربر و مطابقت با معیارهای خاصی است. Angular انواع مختلفی از اعتبار سنجی ها را ارائه می دهد که می توانند برای اجرای قوانین اعتبارسنجی در کنترل های فرم استفاده شوند.

بیایید با ایجاد یک فرم مبتنی بر الگو با اعتبار سنجی شروع کنیم:

<form (ngSubmit)="onSubmit()">
  <label>Name:</label>
  <input type="text" name="name" [(ngModel)]="user.name" required minlength="2" maxlength="20">
  <label>Email:</label>
  <input type="email" name="email" [(ngModel)]="user.email" required email>
  <button type="submit">Submit</button>
</form>

در این مثال، ما را اضافه کرده ایم required، minlength، maxlength، و email تایید کننده های کنترل های فرم این تضمین می کند که کاربر باید نام و آدرس ایمیلی را وارد کند که معیارهای لازم را داشته باشد.

فرم‌های واکنشی از رویکرد مشابهی برای اعتبارسنجی استفاده می‌کنند:

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label>Name:</label>
      <input type="text" formControlName="name">
      <p *ngIf="userForm.get('name').invalid && userForm.get('name').touched">Invalid Name</p>
      <label>Email:</label>
      <input type="email" formControlName="email">
      <p *ngIf="userForm.get('email').invalid && userForm.get('email').touched">Invalid Email</p>
      <button type="submit">Submit</button>
    </form>
  `
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

در این مثال، قوانین اعتبارسنجی یکسانی را به آن اضافه کرده‌ایم name و email کنترل های فرم با استفاده از Validators کلاس ما همچنین یک عنصر “ برای نمایش خطاهای اعتبار سنجی در صورتی که کنترل فرم نامعتبر است و لمس شده است، اضافه کرده ایم.

نتیجه

رسیدگی به ارسال فرم در Angular بخش مهمی از هر برنامه وب است. مجموعه قوی APIها و دستورالعمل‌های Angular، مدیریت فرم‌ها را از قالب‌های مبتنی بر قالب گرفته تا فرم‌های واکنش‌پذیر آسان می‌کند. با استفاده از چارچوب اعتبارسنجی Angular، توسعه دهندگان می توانند اطمینان حاصل کنند که ورودی کاربر معتبر است و با معیارهای خاصی مطابقت دارد.

چه در حال ساخت یک فرم ساده یا یک برنامه پیچیده مبتنی بر داده باشید، Angular ابزارهایی را که برای ارسال فرم به راحتی نیاز دارید، فراهم می کند.