Angular kengaytirilgan formalar

Kengaytirilgan reaktiv shakllar murakkab ma’lumotlarni FormGroup/FormArray bilan modellashtiradi, sinxronlash/async tekshiruvchilarini birlashtiradi va patchValue va updateOn bilan samarali yangilaydi; reaktiv mantiq uchun valueChanges/statusChanges ni kuzating.

Reaktiv formalarning ilg‘or asoslari

Struktura: Murakkab shakllarni modellashtirish uchun FormGroup va FormArray dan foydalaning.
Tasdiqlash: Sinxron va asinxron tekshiruvchilarini nazorat va guruh darajalarida birlashtiring.
Yangilanishlar: Qisman yangilanishlar uchun patchValue dan foydalaning; setValue to‘liq shaklni talab qiladi.

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

fb.group({
  name: ['', Validators.required],
  tags: fb.array([ fb.group({ label: ['Angular'] }) ])
});

// Add row
(form.get('tags') as FormArray).push(fb.group({ label: [''] }));

Misol tushuntirildi

fb.group({...}): Boshqaruv elementlari va tekshirgichlar bilan FormGroup yaratadi.
FormArray: Dinamik qatorlar uchun boshqaruv elementlari/guruhlarining tartiblangan ro‘yxatini saqlaydi.
Qatorni surish: (form.get('tags') as FormArray).push(fb.group({ label: [''] })) yangi guruh qo‘shadi.

Eslatmalar:

Aloqador: Shakllar va xizmatlar va DI-ga qarang.
Yo‘nalishlar bo‘ylab qayta foydalanish uchun forma holatini xizmatda saqlang.
setValue va patchValue : setValue to‘liq shaklni talab qiladi; patchValue kichik to‘plamni yangilaydi.
Nazorat va guruh darajasida tasdiqlang.

Ichki guruhlar va massivlar

Tuzilish va qayta foydalanish uchun guruh bilan bog‘liq boshqaruv elementlari.

Teglar yoki elementlar kabi dinamik massivlar uchun FormArray-dan foydalaning. FormArray - bu uzunligi ish vaqtida o‘zgarishi mumkin bo‘lgan boshqaruv elementlarining tartiblangan ro‘yxati.

const tags = fb.array([ fb.group({ label: ['Angular'] }) ]);
tags.push(fb.group({ label: [''] }));

Misol tushuntirildi

fb.array([...]): Bitta FormGroup qatori bilan FormArray-ni ishga tushiradi.
Qator qo‘shish: tags.push(fb.group({ label: [''] })) boshqa teglar guruhini qo‘shadi.

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators, FormArray } from '@angular/forms';
import { JsonPipe, CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, JsonPipe],
  template: `
    <h3>Advanced Reactive Form</h3>
    <form [formGroup]="form" (ngSubmit)="submit()">
      <input placeholder="Name" formControlName="name">
      <div formArrayName="tags">
        <div *ngFor="let t of tags.controls; let i = index" [formGroupName]="i">
          <input placeholder="Tag" formControlName="label">
        </div>
      </div>
      <button type="button" (click)="addTag()">Add Tag</button>
      <button type="submit">Submit</button>
    </form>
    <pre>{{ form.value | json }}</pre>
  `
})
class App {
  fb = new FormBuilder();
  form = this.fb.group({
    name: ['', Validators.required],
    tags: this.fb.array([this.fb.group({ label: ['Angular'] })])
  });
  get tags(): FormArray { return this.form.get('tags') as FormArray; }
  addTag() { this.tags.push(this.fb.group({ label: [''] })); }
  submit() { alert(JSON.stringify(this.form.value)); }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[formGroup]: Shakl modelini shablonga bog‘laydi.
formArrayName: tags massivga ishora qiladi; har bir qator [formGroupName]="i" dan foydalanadi.
Getter + push: tags oluvchi FormArray ni qaytaradi; addTag() yangi guruh ochadi.
Yuborish: Ichki guruh/massiv tuzilishini aks ettiruvchi form.value ni o‘qiydi.

Bog‘lash bo‘yicha maslahatlar: Har bir string uchun formArrayName va [formGroupName] dan bog‘lanishlarni tekislash uchun foydalaning.

Izchil shakllar: bir xil boshqaruv shakliga ega guruhlarni FormArray ga suring; ibtidoiy va guruhlarni aralashtirishdan saqlaning.

Dinamik ro‘yxatlar: *ngFor bilan renderlashda qatorlarni qo‘shish/o‘chirishda kirishlarni barqaror saqlash uchun trackBy dan foydalaning.

Tasdiqlash strategiyalari

Ko‘pgina qoidalar uchun sinxron tekshiruvchilardan foydalaning; ular tez va sodda.
Server tekshiruvlari/o‘ziga xosligi uchun async validatorlardan foydalaning; ular sinxronlash validatorlaridan keyin ishlaydi.
Sinxron tekshiruvdan oldin tekshirishni o‘chirib qo‘ying va kirishlarni bekor qiling.

import { AbstractControl, ValidationErrors } from '@angular/forms';

function banned(value: string[]): (c: AbstractControl): ValidationErrors | null {
  return (c) => value.includes(c.value) ? { banned: true } : null;
}

fb.control('', [Validators.required, banned(['admin'])]);

Misol tushuntirildi

Validator zavodi: banned([...]) funksiyani qaytaradi (c: AbstractControl) => ValidationErrors | null .
Boshqaruv darajasi: Boshqaruvga Validators.required va moslashtirilgan qoidalar kabi sinxronlash tekshiruvchilarini biriktiring.

// Group-level validator and updateOn: 'blur'
import { AbstractControl, ValidationErrors } from '@angular/forms';

function samePassword(group: AbstractControl): ValidationErrors | null {
  const pass = group.get('pass')?.value;
  const confirm = group.get('confirm')?.value;
  return pass === confirm ? null : { mismatch: true };
}

const form = fb.group(
  { pass: [''], confirm: [''] },
  { validators: samePassword, updateOn: 'blur' }
);

Ko‘rsatmalar:

Maydonlararo qoidalar uchun (masalan, parollar mosligi) guruh darajasidagi validatorlardan foydalaning.
Zarur bo‘lganda, updateOn: 'blur' | 'submit' (tasdiqlashni kechiktirish/qiymat o‘zgarishlari) bilan kamaytiring.
Shovqinli UXdan qochish uchun touched / dirty asosidagi xatolarni ko‘rsating.
Async validatorlar tez va bekor qilinishi kerak; server tekshiruvlarini boshlashdan oldin kirishlarni bekor qiling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish