ساخت یک Enable/Disable + Input Field Component سفارشی در Angular

کار با اجزای فرم سفارشی در Angular می تواند یک تغییر دهنده بازی برای ایجاد کد قابل استفاده مجدد و قابل نگهداری باشد. اجزای سفارشی نه تنها منطق فرم پیچیده را در بر می گیرند، بلکه خوانایی و ماژولار بودن کد را نیز افزایش می دهند. امروز، بیایید به ایجاد یک جزء فیلد سفارشی که شامل یک سوئیچ و یک عدد ورودی است، بپردازیم. این کامپوننت به عنوان یک آداپتور کار می کند و به طور یکپارچه با فرم های واکنشی Angular یکپارچه می شود.

سناریو

ما به فیلدی نیاز داریم که به کاربر اجازه می‌دهد کادری را علامت بزند تا یک عدد ورودی را فعال کند و اگر فعال است، مقدار آن را دریافت کند. برای تجزیه آن، ما نیاز داریم:

• یک سوئیچ (چک باکس) برای فعال یا غیرفعال کردن ورودی عدد.
• هنگامی که سوئیچ خاموش است، ورودی عدد باید غیرفعال شود و مقدار آن باید روی تعریف نشده تنظیم شود.
• هنگامی که سوئیچ خاموش است، فرم باید مقدار 0 و هنگامی که سوئیچ روشن است، مقدار ورودی عدد را داشته باشد.

همانطور که می بینیم، ما 2 فیلد داریم (چک باکس و عدد ورودی) اما فقط یک مقدار در فرم می خواهیم. و این مقدار همیشه 1 به 1 مقدار ورودی عدد نیست. برای مدیریت این منطق، یک کامپوننت فیلد سفارشی ایجاد می کنیم تا به عنوان آداپتور کار کند.

بیا شروع کنیم!

مرحله 1: کامپوننت سفارشی را ایجاد کنید

ابتدا یک جزء جدید به نام custom-field ایجاد کنید:

ng generate component custom-field

مرحله 2: منطق مؤلفه را پیاده سازی کنید

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

رابط ControlValueAccessor به Angular اجازه می دهد تا با اجزای فرم سفارشی ارتباط برقرار کند. به عنوان یک آداپتور بین API فرم Angular و مؤلفه سفارشی عمل می کند و روش هایی را برای خواندن و نوشتن در کنترل فرم ارائه می دهد. از 4 روش تشکیل شده است: writeValue(obj: any)، registerOnChange(fn: any)، registerOnTouched(fn: any)، setDisabledState?(isDisabled: boolean)، آخرین مورد اختیاری است.

• writeValue(obj: any): این روش برای به روز رسانی مقدار کامپوننت زمانی که مقدار کنترل فرم تغییر می کند استفاده می شود.
• registerOnChange (fn: any): از این روش برای ثبت تابع callback استفاده می شود که Angular زمانی که مقدار کامپوننت تغییر می کند آن را فراخوانی می کند.
• registerOnTouched (fn: any): از این روش برای ثبت تابع callback استفاده می شود که Angular با لمس کامپوننت آن را فراخوانی می کند.
• setDisabledState؟ (isDisabled: boolean): این روش اختیاری برای به‌روزرسانی وضعیت غیرفعال بودن مؤلفه استفاده می‌شود.

برای درک آسان تر از استفاده از رابط، می توانیم مقایسه کنیم writeValue() با یک جزء @Input و onChange() با یک جزء @Output.

custom-field.component.html:

custom-field.component.ts:

@Component({
  selector: 'app-custom-switch-input-field',
  templateUrl: './custom-switch-input-field.component.html',
  styleUrls: ['./custom-switch-input-field.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomSwitchInputFieldComponent),
      multi: true,
    },
  ],
})
export class CustomSwitchInputFieldComponent implements ControlValueAccessor {
  isSwitchOn = false;
  numberValue: number | undefined;

  private onChange: any = () => {};
  private onTouched: any = () => {};

  writeValue(value: number): void {
    this.isSwitchOn = value !== 0;
    this.numberValue = this.isSwitchOn ? value : undefined;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  onSwitchChange() {
    if (!this.isSwitchOn) {
      this.numberValue = undefined;
      this.onChange(0);
    } else {
      this.numberValue = 0;
    }
    this.onTouched();
  }

  onNumberChange(value: number) {
    if (this.isSwitchOn) {
      this.onChange(value);
    }
    this.onTouched();
  }
}

مرحله 3: ادغام با مؤلفه والد

بیایید با یک مؤلفه والد ادغام کنیم تا از مؤلفه فیلد سفارشی خود در یک فرم واکنشی استفاده کنیم.

parent.html:

 [formGroup]="form">
   formControlName="customField">

parent.ts:

  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      customField: [0], // Default value
    });
  }

مثال ها و موارد استفاده

در اینجا چند مثال دیگر از نحوه استفاده از مؤلفه فیلد سفارشی در سناریوهای مختلف آورده شده است:

مثال 1: پیکربندی گزینه های محصول
فرمی را برای پیکربندی گزینه‌های محصول تصور کنید که در آن ویژگی‌های خاصی را می‌توان فعال یا غیرفعال کرد و فیلدهای ورودی مربوطه را بر این اساس تنظیم کرد. این در پلتفرم های تجارت الکترونیکی که محصولات می توانند افزونه های اختیاری داشته باشند مفید است.

مثال 2: فیلدهای فرم شرطی
در فرم نظرسنجی، سؤالات خاصی ممکن است فقط در صورت انتخاب گزینه های خاص ظاهر شوند. به عنوان مثال، اگر کاربر برای سؤالی در مورد داشتن یک وسیله نقلیه “بله” را انتخاب کند، ممکن است فیلدهای اضافی در مورد خودرو ظاهر شود. مؤلفه فیلد سفارشی می‌تواند فیلدهای ورودی را بر اساس انتخاب کاربر فعال و غیرفعال کند.

نتیجه

با پیاده سازی ControlValueAccessor، یک جزء فیلد سفارشی ایجاد کردیم که به راحتی با فرم های واکنشی Angular یکپارچه می شود. این مؤلفه که به عنوان یک آداپتور عمل می کند، یک حالت داخلی پیچیده را به یک رابط سازگار با فرم ترجمه می کند. این رویکرد منطق میدان را در بر می گیرد، قابلیت استفاده مجدد را افزایش می دهد و تضمین می کند که فرم های ما نگهداری و گسترش آنها آسان تر است. می توانید کد کامل را در github چک کنید.