Jassif Team Institution

ஆங்குலர் ரியாக்டிவ் படிவங்கள் மேம்பட்டம்

மேம்பட்ட ரியாக்டிவ் படிவங்கள் FormGroup/FormArray உடன் சிக்கலான தரவை மாதிரியாக்குகின்றன, ஒத்திசை/அசிங்க்ரோனஸ் சரிபார்ப்பாளர்களை இணைக்கின்றன மற்றும் patchValue மற்றும் updateOn உடன் திறம்பட புதுப்பிக்கின்றன; எதிர்வினை தர்க்கத்திற்கு valueChanges/statusChanges ஐக் கவனிக்கவும்.

ரியாக்டிவ் படிவங்கள் மேம்பட்ட அடிப்படைகள்

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

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

// வரிசையைச் சேர்க்கவும்
(form.get('tags') as FormArray).push(fb.group({ label: [''] }));

கூடிய குழுக்கள் மற்றும் வரிசைகள்

கட்டமைப்பு மற்றும் மறுபயன்பாட்டிற்காக தொடர்புடைய கட்டுப்பாடுகளைக் குழுவாக்கவும்.

டைனமிக் பட்டியல்களுக்கு FormArray பயன்படுத்தவும். FormArray என்பது கட்டுப்பாடுகளின் வரிசைப்படுத்தப்பட்ட பட்டியலாகும், அதன் நீளம் இயக்க நேரத்தில் மாறக்கூடியது.

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

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);

சரிபார்ப்பு மூலோபாயங்கள்

பெரும்பாலான விதிகளுக்கு ஒத்திசை சரிபார்ப்பாளர்களைப் பயன்படுத்தவும்; அவை விரைவானவை மற்றும் எளிமையானவை.

சேவையக சரிபார்ப்புகள்/தனிப்பட்ட தன்மைக்கு அசிங்க்ரோனஸ் சரிபார்ப்பாளர்களைப் பயன்படுத்தவும்; அவை ஒத்திசை சரிபார்ப்பாளர்களுக்குப் பிறகு இயங்கும்.

சரிபார்ப்பை இலகுவாக வைத்திருக்கவும் மற்றும் அசிங்க்ரோனஸ் சரிபார்ப்புகளுக்கு முன் உள்ளீடுகளை debounce செய்யவும்.

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'])]);

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' }
);

படிவ புதுப்பிப்பு மூலோபாயங்கள்

மேம்பட்ட படிவ முறைகள்

form.patchValue(savedState)

control.setValidators([...])

@Component({ selector: 'address-form' })

form.valueChanges.subscribe(...)

பயிற்சி

ரியாக்டிவ் படிவங்களில் டைனமிக் பட்டியல்களுக்கு எந்த கட்டமைப்பு சிறந்தது?