تحديث حقول FormArray في Angular

لتحديث حقل “day” في مصفوفة النموذج “branch_timing”، يجب عليك القيام بخطوات معينة. أولاً وقبل كل شيء، يجب أن تحصل على مصفوفة التوقيتات الفرعية باستخدام الطريقة controls() للوصول إلى FormArray ثم استخدام الطريقة at() للوصول إلى الفهرس الصحيح للعنصر الفرعي الذي ترغب في تحديثه.

ثم، بمجرد الوصول إلى العنصر الفرعي الصحيح، يمكنك استخدام طريقة patchValue() لتحديث قيمة حقل “day”.

إليك كيفية القيام بذلك بالكود:

typescriptCopy code
// الحصول على الـ FormArray لمصفوفة التوقيتات الفرعية
const branchTimingArray = this.myForm.get('branch_timing') as FormArray;

// تحديد العنصر الفرعي الصحيح باستخدام الفهرس المناسب (مثل العنصر الأول في هذا المثال)
const branchTimingSubGroup = branchTimingArray.at(0) as FormGroup;

// تحديث قيمة حقل "day"
branchTimingSubGroup.patchValue({
  day: 'القيمة الجديدة هنا'
});

هذا الكود سيحدث قيمة حقل “day” في العنصر الفرعي الأول من مصفوفة التوقيتات الفرعية. يمكنك تعديل الفهرس في الدالة at() لتحديد العنصر الفرعي الذي تريد تحديثه، وتعديل القيمة المطلوبة بدلاً من ‘القيمة الجديدة هنا’ وفقاً لاحتياجاتك.

هذا يتيح لك تحديث حقل “day” بنجاح في مصفوفة النموذج “branch_timing” بواسطة الكود المذكور أعلاه.

عند العمل مع نماذج Angular وخاصة عناصر FormArray، يمكن أن تكون عملية تحديث البيانات معقدة قليلاً، خاصة عند التعامل مع الحقول الفرعية. في هذا المقال، سنلقي نظرة على كيفية تحديث حقول FormArray بشكل فعال باستخدام Angular.

لنفترض أن لدينا نموذج FormGroup يحتوي على FormArray، ونحتاج إلى تحديث حقل محدد في العناصر الفرعية لهذا الـ FormArray. لدينا مثال توضيحي لنموذج FormGroup يتكون من مجموعة فرعية من البيانات:

typescriptCopy code
this.myForm = this._fb.group({            
    branch_name: ['', [Validators.required]],
    branch_timing: this._fb.array([
        this.initBranchTiming(),
    ])                                
});

initBranchTiming() {       
    return this._fb.group({
        day: ['', []],
        open_from: ['00:00:00', []],
        open_till: ['00:00:00', []]           
    });
}

في هذا المثال، لدينا حقل “day” في العنصر الفرعي من FormArray يحتاج إلى التحديث. لتحديث هذا الحقل، يمكننا استخدام الطريقة التالية:

typescriptCopy code
// الحصول على الـ FormArray لمصفوفة التوقيتات الفرعية
const branchTimingArray = this.myForm.get('branch_timing') as FormArray;

// تحديد العنصر الفرعي الصحيح باستخدام الفهرس المناسب (مثل العنصر الأول في هذا المثال)
const branchTimingSubGroup = branchTimingArray.at(0) as FormGroup;

// تحديث قيمة حقل "day"
branchTimingSubGroup.patchValue({
  day: 'القيمة الجديدة هنا'
});

باستخدام هذا الكود، يمكننا بسهولة تحديث حقل “day” في العنصر الفرعي الأول من مصفوفة التوقيتات الفرعية. يمكن تعديل الفهرس في الدالة at() لتحديد العنصر الفرعي الذي تريد تحديثه، ويمكن تعديل القيمة المطلوبة بدلاً من ‘القيمة الجديدة هنا’ وفقاً لاحتياجاتك.

تتيح لك هذه الطريقة تحديث حقول FormArray بشكل فعال ومرن، مما يسهل عملية التعامل مع بيانات النموذج في تطبيقات Angular.