Angular - Reaktív űrlapépítő

• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

import { 
  FormBuilder,
  FormControl, 
  FormGroup,
  ReactiveFormsModule 
} from '@angular/forms';
 
//...
 
imports: [ReactiveFormsModule],

<form [formGroup]="employeeForm">
 
</form>

A ReactiveFormsModule szükséges a reaktív űrlapok használatához. Ha a reaktív űrlapot csoportosítva használjuk, akkor szükség van a FormGroup-ra is. Ha a csoportot FormBuilder-rel építjük, akkor természetesen a FormBuilder-re is szükség van.

A FormControl-t használjuk az egyes űrlap mezők meghatározásához.

Az egyes input elemekhez kötelezően egy formControlName attribútumot készítünk. TypeScript oldalon ezeken a neveken lehet elérni az input elemek tartalmát.

    <input type="text"
    class="form-control"
    id="name"
    formControlName="name">
 
    <input type="text"
      class="form-control"
      id="city"
      formControlName="city">
 
    <input type="text"
      class="form-control"
      id="salary"
      formControlName="salary">

A kattintás általában egy nyomógombra történik. A nyomógomb kétféle eseményt válthat ki:

• click
• submit

Attól függ milyen típusú. <input type="button"> vagy <input type="submit">. A submit eseményt viszont a form elemen kell figyelnünk.

export class AppComponent {
 
  employeeForm !: FormGroup;
 
  constructor(private formBuilder: FormBuilder) {}
 
  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: new FormControl(''),
      city: new FormControl(''),
      salary: new FormControl('')
    })
  }
 
  onSubmit() {
    console.log(this.employeeForm.value);
  }
}

Az önálló űrlap elemeket a fomr elemmel csoportosítjuk. Ehhez használjuk az Angular [fromGrup] direktíváját. Az űrlapot célszerű submit eseménnyel kezelni, akkor használhatjuk a (ngSubmit) direktívát. Ha button elemet hozunk létre, annak típusa legyen submit, hiszen csak így tudjuk kiváltani a submit eseményt.

<form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
 
<button type="submit">Mehet</button>
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
import { 
  FormBuilder,
  FormControl, 
  FormGroup,
  ReactiveFormsModule 
} from '@angular/forms';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
 
  employeeForm !: FormGroup;
 
  constructor(private formBuilder: FormBuilder) {}
 
  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: new FormControl(''),
      city: new FormControl(''),
      salary: new FormControl('')
    })
  }
 
  onSubmit() {
    console.log(this.employeeForm.value);
  }
}

src/app/app.component.html

<form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">
 
  <div class="form-group">
    <label for="name">Név</label>
    <input type="text"
    class="form-control"
    id="name"
    formControlName="name">
  </div>
 
  <div class="form-group">
    <label for="city">Település</label>
    <input type="text"
      class="form-control"
      id="city"
      formControlName="city">
  </div>
 
  <div class="form-group">
    <label for="salary">Fizetés</label>
    <input type="text"
      class="form-control"
      id="salary"
      formControlName="salary">
  </div>
 
  <button type="submit" 
  class="btn btn-primary">
    Küld
  </button> 
 
</form>

Eredmény:

{
    "name": "Mari",
    "city": "Pécs",
    "salary": "391"
}

A FormControl konstruktorok hívása helyett elég egy szögletes zárójelben leírni egy mező tulajdonságait.

import { 
  FormBuilder,  
  FormGroup,
  ReactiveFormsModule
} from '@angular/forms';
 
//...
 
  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: [''],
      city: [''],
      salary: ['']
    })
  }

A FormControl törölhető az import sorból.

Az érvényesség használatához rendelkezésre áll egy Validators nevű osztály. Ennek statikus tagjaival különféle érvényességeket vizsgálhatunk.

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

Az érvényesség használata rövidítés esetén:

  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: ['', Validators.required],
      city: [''],
      salary: ['']
    })
  }