Angular'daki Fabrika Desenini Angular

Modern Angular uygulamaları genellikle farklı kullanıcı rollerine adapte olan formlar gerektirir, veri şemaları veya yapılandırma ortamları. Manually creatingENFLT:0) Her permutasyon için örnekler tekrarlanan kod, kırılgan geçiş vakaları ve ⁇ d doğrulama mantığı. Fabrika Deseni, tanımlanmış bir tip veya yapılandırmaya dayalı nesneler oluşturmak için merkezileştirilmiş bir mekanizma sağlayarak bunu ele alır.In basic, fabrika bir form- orkestrası olarak çalışır: bir belirti kabul eder (örneğin, bir dize, bir yapılandırma nesnesi) ve tam olarak ilk olarak döndürür.

Fabrika anlık mantıklarını enkaplar, bu yüzden bileşenler artık bir avuçdan daha fazla büyümez veya kontrolleri nasıl birleştireceğinizi bilmeniz gerekir. Bu endişelerin ayrılması, kodbase'i daha modüler, test edilebilir ve ölçeklenebilir hale getirir - özellikle de form türleri sayısı bir avuç ötesinde büyür.

Fabrika Desenini Dinamik Formlar için Neden Kullanın?

Angular zaten karmaşık form senaryoları işlemek için [[Şerefli form oluşturmaları sağlar, ancak fabrika modeli genellikle procedural kazanım işlemini ortadan kaldırır. İşte birincil avantajlar:2).

  • [FONT:0]Reduces code duplication.[[Döneticileri veya hizmetleri kullanarak yeniden yapılan inşaatlar yerine, bir fabrika yönteminde mantığı merkeziyorsunuz.Her form tipi, sadece bir kez mantığını yazıyorsunuz.
  • [FONT:0)Enhances kullanılabilirlik sağlar.[[Dönetici:0] Yeni bir form türü eklemek, fabrikada yeni bir inşaat sınıfı oluşturmak ve kayıt yaptırmak anlamına gelir. Mevcut bileşenler yok, talep formları talep ettikleri sürece.
  • [FONT:0)Allows esnek form konfigürasyonları.[DÜT:1] Fabrika ek parametreleri kabul edebilir (örneğin, kullanıcı izinleri, yerel veya özel bayraklar) hangi kontrollerin dahil edildiği veya nasıl doğrulandığını gösteren etkiler.
  • [FONT=0]Depler dinamik kullanıcı arayüzüne destek verir.[DÜDÜT:0)Demek için kullanılan form türü çalıştırıldığında (örneğin, bir veritabanı kaydı veya bir rota parametresi ile), fabrika uçta arsaya uygun hale getirir.
  • [FONT:0]Finans testiability [Dönetici: 1 ) Her form inşaatçısı bağımsız olarak birleştirilebilir. Fabrikanın kendisi, bileşen testlerinde alay edilebilir veya şaşkınlık gösteren basit bir harita haline gelir.

Bu avantajlar özellikle birçok farklı iş akışlarını desteklemesi gereken işletme uygulamalarında değerlidir, her biri kendi alanları ve geçerlilik kuralları ile.

Core Implementation Steps

Adım 1: Form Enumeration ve Interfaces

Bir form türünü tanımlamakla başlayın. Bir enum kullanarak tip tipler yazın ve açık bir sözleşme sağlar:

export enum FormType {
 Login = 'login',
 Registration = 'registration',
 Feedback = 'feedback',
 Contact = 'contact'
}

Sonraki, tüm form inşaatçılarının uygulayacağı bir arayüz tanımlayın. Bu, fabrikanın onlara polimorphically davranabilmesini sağlar:

import { FormGroup } from '@angular/forms';

export interface FormBuilderInterface {
 build(config?: any): FormGroup;
}

Seçmeli parametre, inşaatçıların, önceden belirlenmiş değerler gibi, iş zamanında verilere dayalı formu özelleştirme kurallarını kullanıcı rolü için uygunlaştırma veya doğrulama kurallarını özelleştirmesine izin verir.

2. Adım: Beton Form Builders

Her beton inşaatçı, uygun bir şekilde yapılandırılabilir bir şekilde döndürür. Örneğin, bir giriş formu üreticisi bu şekilde görünebilir:

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

export class LoginFormBuilder implements FormBuilderInterface {
 private fb: FormBuilder;

 constructor() {
 this.fb = new FormBuilder();
 }

 build(): FormGroup {
 return this.fb.group({
 email: ['', [Validators.required, Validators.email]],
 password: ['', [Validators.required, Validators.minLength(6)]],
 rememberMe: [false]
 });
 }
}

Bir kayıt formu inşaatçı ek kontroller ve çapraz kullanım içerebilir:

export class RegistrationFormBuilder implements FormBuilderInterface {
 private fb: FormBuilder;

 constructor() {
 this.fb = new FormBuilder();
 }

 build(): FormGroup {
 const form = this.fb.group({
 firstName: ['', Validators.required],
 lastName: ['', Validators.required],
 email: ['', [Validators.required, Validators.email]],
 password: ['', [Validators.required, Validators.minLength(8)]],
 confirmPassword: ['', Validators.required]
 }, { validators: this.matchPasswords });

 return form;
 }

 private matchPasswords(group: FormGroup): { [key: string]: any } | null {
 const password = group.get('password')?.value;
 const confirm = group.get('confirmPassword')?.value;
 return password === confirm ? null : { mismatch: true };
 }
}

Bu yapı ölçekleri temiz bir şekilde: her inşaatçı sadece kendi formlarının ayrıntılarına odaklanır ve inşaatçılar tarafından mantıkları yeniden kullanabilir veya yardımcı işlevleri kullanarak yeniden kullanabilirsiniz.

3. Adım: Fabrika Sınıfı Oluşturma

Fabrika sınıfı, bir form tipini kendi inşaatçısına haritalamaktan sorumludur. Basit bir uygulama bir anahtar ifade veya harita nesne kullanır:

import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormType } from './form-type.enum';
import { LoginFormBuilder } from './login-form.builder';
import { RegistrationFormBuilder } from './registration-form.builder';
import { FeedbackFormBuilder } from './feedback-form.builder';

@Injectable({ providedIn: 'root' })
export class FormFactory {
 private builders = new Map<FormType, FormBuilderInterface>();

 constructor() {
 // Register builders
 this.builders.set(FormType.Login, new LoginFormBuilder());
 this.builders.set(FormType.Registration, new RegistrationFormBuilder());
 this.builders.set(FormType.Feedback, new FeedbackFormBuilder());
 }

 createForm(type: FormType, config?: any): FormGroup {
 const builder = this.builders.get(type);
 if (!builder) {
 throw new Error(`No builder registered for form type: ${type}`);
 }
 return builder.build(config);
 }
}

Yapıcının içinde inşaatçılara kayıt etmek basit, ancak Angular'ın inşaatçıları sağlamak için bağımlılığı enjeksiyonunu tercih edebilirsiniz.Bu yaklaşım daha sonra ele alınacaktır.

Adım 4: Fabrikayı Bileşenlerinde Kullanın

Fabrika yerinde, bileşenler inşaatın ayrıntılarını bilmeden bir form örneği isteyebilir. Örneğin, bir rota parametresine dayanan birden çok form tipi ele alan bir bileşen:

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormFactory } from './form.factory';
import { FormType } from './form-type.enum';

@Component({
 selector: 'app-dynamic-form',
 template: `