Angular formalari

Shakllar foydalanuvchilarga ilovangizga ma’lumotlarni kiritish va tahrirlash imkonini beradi.

Formalar asoslari

Ikkita yondashuv: Shablonga asoslangan (HTML-avval [(ngModel)] bilan) va Reaktiv (birinchi kod - FormGroup/FormControl bilan).
Qachon foydalanish kerak: Oddiy shakllar uchun shablonga asoslangan; Murakkab tekshirish, dinamik maydonlar va sinovdan o‘tish uchun reaktiv.
Asosiy tushunchalar: FormControl bitta kirish qiymatini/holatini kuzatib boradi; FormGroup boshqaruv elementlarini nomi bo‘yicha guruhlarga ajratadi.
Importlar: FormsModule (shablonga asoslangan) va ReactiveFormsModule (reaktiv).


<form #f="ngForm">
  <input name="name" [(ngModel)]="name">
</form>


form = new FormGroup({ name: new FormControl('') });

<form [formGroup]="form">
  <input formControlName="name">
</form>

Eslatmalar:

Tegishli: [(ngModel)] uchun ma’lumotlarni bog‘lash va xususiyatni bog‘lash, kiritishni qayta ishlash uchun hodisalar va interpolyatsiya uchun shablonlarga qarang.
Import FormsModule (shablonga asoslangan) va ReactiveFormsModule (reaktiv).

Shablonga asoslangan shakllar

Tez boshlash va oddiy HTML kabi.
[(ngModel)] va noyob name atributlari bilan bog‘lang.
Access overall state via exported ngForm (e.g., valid, touched).
Mustaqil komponentlarda FormsModule importi.

<form #f="ngForm" (ngSubmit)="onSubmit()">
  <input name="name" [(ngModel)]="name" required minlength="3" #c="ngModel">
  <div *ngIf="c.invalid && (c.dirty || c.touched)">Invalid</div>
  <button [disabled]="f.invalid">Submit</button>
</form>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h3>Forms</h3>
    <form #f="ngForm" (ngSubmit)="onSubmit()">
      <label>
        Name:
        <input name="name" [(ngModel)]="name" placeholder="Enter your name">
      </label>
      <button type="submit">Submit</button>
    </form>
    <p>Value: {{ name }}</p>
    <p *ngIf="submitted">Submitted!</p>
  `
})
export class App {
  name = '';
  submitted = false;
  onSubmit() { this.submitted = true; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[(ngModel)]="name": Ikki tomonlama kirishni nom maydoniga bog‘laydi.
#f="ngForm": Shakl holatini eksport qiladi (masalan, f.valid, f.invalid).
(ngSubmit)="onSubmit()": component usuli yordamida jo‘natish qo‘llari.
Displey: {{ name }} joriy qiymatni ko‘rsatadi; bayroq topshirilgan holatni ko‘rsatadi.

Eslatmalar:

Noyob nom talab qilinadi: Har bir boshqaruvga ngForm ro‘yxatdan o‘tish uchun noyob name kerak.
Modul importi: Shablonga asoslangan shakllar uchun FormsModule kerak (mustaqil componentlar uchun uni imports ga qo‘shing).

Burchakdagi HTML forma elementlari

Matn/Email/Raqam: [(ngModel)] yoki formControlName bilan bog‘lang.
Textarea: matn kiritish kabi ishlaydi.
Belgilash katagi: [(ngModel)] yoki formControlName orqali mantiqiy qiymat.
Radio guruhi: Xuddi shu narsani ulashing name ; guruhni [(ngModel)] yoki formControlName bilan bog‘lang. [value] dan foydalaning.
Tanlash: Tanlangan qiymatni bog‘lash; variantlar obyekt bo‘lganda [ngValue] dan foydalaning.
Fayl kiritish: (change) ishlov beruvchisi yordamida fayllarni o‘qing; fayl obyektlarini ikki tomonlama bog‘lamang.

<input name="email" type="email" [(ngModel)]="model.email">
<textarea name="bio" [(ngModel)]="model.bio"></textarea>
<label><input type="checkbox" name="agree" [(ngModel)]="model.agree"> Agree</label>
<label><input type="radio" name="color" [value]="'red'" [(ngModel)]="model.color"> Red</label>
<label><input type="radio" name="color" [value]="'blue'" [(ngModel)]="model.color"> Blue</label>
<select name="pet" [(ngModel)]="model.pet">
  <option [ngValue]="{ id: 1, name: 'Cat' }">Cat</option>
  <option [ngValue]="{ id: 2, name: 'Dog' }">Dog</option>
</select>
<input type="file" (change)="onFiles($event)">

Maslahat: <select> dagi obyekt variantlari uchun value o‘rniga [ngValue] dan foydalaning.

Qator bo‘lmagan qiymatlarga ega radio

Radiolarga simli bo‘lmagan qiymatlarni (raqamlar yoki obyektlar) ulash uchun [ngValue] dan foydalaning.

<label><input type="radio" name="size" [ngValue]="1" [(ngModel)]="model.size"> Small</label>
<label><input type="radio" name="size" [ngValue]="2" [(ngModel)]="model.size"> Medium</label>

Bir nechtani tanlang

multiple qo‘shing va massivga bog‘lang; string bo‘lmagan qiymatlar uchun [ngValue] dan foydalaning.

<select name="tags" [(ngModel)]="model.tags" multiple>
  <option [ngValue]="'news'">News</option>
  <option [ngValue]="'tech'">Tech</option>
  <option [ngValue]="'sports'">Sports</option>
</select>

Raqamli kirishlar: majburlash

Shablonga asoslangan qiymatlarni stringlar sifatida bog‘laydi; agar sizga raqamlar kerak bo‘lsa kodga aylantiring.

<input type="number" name="age" [ngModel]="age" (ngModelChange)="age = $any($event)">

Fayl kiritish (multiple)

Fayllarni (change) ishlov beruvchisi bilan o‘qing; fayllarni ikki tomonlama bog‘lamang.

<input type="file" multiple (change)="onFiles($event)">

Obyektlarni tanlash uchun solishtiring

Variantlar renderlar bo‘ylab qayta yaratilishi mumkin bo‘lgan obyektlar bo‘lsa, [compareWith] dan foydalaning.

<select name="pet" [(ngModel)]="model.pet" [compareWith]="byId">
  <option [ngValue]="{ id: 1, name: 'Cat' }">Cat</option>
  <option [ngValue]="{ id: 2, name: 'Dog' }">Dog</option>
</select>


byId = (a: any, b: any) => a?.id === b?.id;

Tasdiqlash

Add rules like required, minlength, and email.
Xatolar noto‘g‘ri va boshqaruv dirty yoki touched bo‘lsa yoki topshirilgandan keyin ko‘rsatiladi.
Shakl noto‘g‘ri bo‘lsa, yuborishni o‘chiring.

<input name="email" [(ngModel)]="email" email required #e="ngModel">
<div *ngIf="e.invalid && (e.dirty || e.touched)">
  <small *ngIf="e.errors && e.errors['required']">Required</small>
  <small *ngIf="e.errors && e.errors['email']">Invalid email</small>
</div>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h3>Forms Validation</h3>
    <form #f="ngForm" (ngSubmit)="onSubmit()" novalidate>
      <label>
        Name:
        <input name="name" [(ngModel)]="model.name" required minlength="3" #name="ngModel">
      </label>
      <div *ngIf="name.invalid && (name.dirty || name.touched || submitted)" style="color:crimson">
        <small *ngIf="name.errors && name.errors['required']">Name is required.</small>
        <small *ngIf="name.errors && name.errors['minlength']">Name must be at least 3 characters.</small>
      </div>

      <label>
        Email:
        <input name="email" [(ngModel)]="model.email" email required #email="ngModel">
      </label>
      <div *ngIf="email.invalid && (email.dirty || email.touched || submitted)" style="color:crimson">
        <small *ngIf="email.errors && email.errors['required']">Email is required.</small>
        <small *ngIf="email.errors && email.errors['email']">Email must be valid.</small>
      </div>

      <button type="submit" [disabled]="f.invalid">Submit</button>
    </form>

    <p *ngIf="submitted">Submitted: {{ model | json }}</p>
  `
})
export class App {
  model = { name: '', email: '' };
  submitted = false;
  onSubmit() { this.submitted = true; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

#name="ngModel": Nom kiritish uchun boshqaruv holatini eksport qiladi.
Xatolar: name.errors['required'] va name.errors['minlength'] maxsus xabarlarni boshqaradi.
Qachon ko‘rsatiladi: Xabarlar boshqaruv noto‘g‘ri va dirty || touched || submitted bo‘lganda paydo bo‘ladi.
Yuborishni o‘chirish: tugma noto‘g‘ri yuborishning oldini olish uchun f.invalid bilan bog‘lanadi.

Eslatmalar:

Xatolarni qachon ko‘rsatish kerak: Xabarlar juda erta o‘chib ketmasligi uchun dirty || touched || submitted orqasiga o‘tkazing.
To‘g‘ri yuborishni o‘chirish: f.invalid (shablon) yoki form.invalid (reaktiv) ga bog‘lang.

Reaktiv shakllar

Kodda FormGroup/FormControl daraxtini yarating.
Shablonni [formGroup] va formControlName bilan bog‘lang.
Murakkab tekshirish, shartli maydonlar va dinamik shakllar uchun juda yaxshi.
FormBuilder va Validators yordamida boshqaruv elementlarini yarating.

form = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  email: ['', [Validators.required, Validators.email]],
});

<form [formGroup]="form">
  <input formControlName="name">
  <input formControlName="email">
</form>

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <h3>Reactive Forms</h3>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label>
        Name
        <input formControlName="name" placeholder="Your name">
      </label>
      <div *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched || submitted)" style="color:crimson">
        <small *ngIf="form.controls.name.errors && form.controls.name.errors['required']">Name is required.</small>
        <small *ngIf="form.controls.name.errors && form.controls.name.errors['minlength']">Min 3 characters.</small>
      </div>

      <label>
        Email
        <input formControlName="email" placeholder="you@example.com">
      </label>
      <div *ngIf="form.controls.email.invalid && (form.controls.email.dirty || form.controls.email.touched || submitted)" style="color:crimson">
        <small *ngIf="form.controls.email.errors && form.controls.email.errors['required']">Email is required.</small>
        <small *ngIf="form.controls.email.errors && form.controls.email.errors['email']">Email must be valid.</small>
      </div>

      <label>
        <input type="checkbox" formControlName="newsletter">
        Subscribe to newsletter
      </label>

      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>

    <p>Status: {{ form.status }}</p>
    <p>Value: {{ form.value | json }}</p>
    <p *ngIf="submitted" style="color: seagreen;">Submitted!</p>
  `
})
export class App {
  fb = new FormBuilder();
  submitted = false;
  form = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    email: ['', [Validators.required, Validators.email]],
    newsletter: [false],
  });

  onSubmit() { this.submitted = true; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[formGroup]="form": Shakl elementini FormGroup misoliga bog‘laydi.
formControlName: Wires inputs to named controls (name, email, newsletter).
Validatorlar: FormBuilder va Validators bilan yaratilgan; xato xabarlari nazorat xatolarini o‘qiydi.
Submit: form.invalid bo‘lganda tugmani o‘chiradi; topshirilganda yuborilgan bayroqni o‘rnatadi.

Eslatmalar:

Paradigmalarni aralashtirmang: formControlName ishlatadigan boshqaruv elementlarida [(ngModel)] dan saqlaning.
API orqali yangilash: To‘g‘ridan-to‘g‘ri boshqaruv obyektlarini mutatsiyalashdan ko‘ra setValue / patchValue va validator usullaridan tuzatish.
Modul importi: Reaktiv shakllar uchun ReactiveFormsModule talab qilinadi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish