szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

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

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Szükséges modulok =====

<code javascript>

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

//...

imports: [ReactiveFormsModule],
</code>

<code html>
<form [formGroup]="employeeForm">

</form>
</code>


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.
===== Bevitel =====

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.

<code html>

    <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">

</code>

===== Kattintás =====

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ú. <nowiki><input type="button"> vagy <input type="submit"></nowiki>. 
A submit eseményt viszont a form elemen kell figyelnünk.

<code javascript>
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);
  }
}

</code>

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.

<code html>
<form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">

<button type="submit">Mehet</button>
</form>
</code>

===== Teljes kód =====

<code javascript 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);
  }
}

</code>

<code html 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>
</code>

Eredmény:
<code>
{
    "name": "Mari",
    "city": "Pécs",
    "salary": "391"
}
</code>

===== Rövidítés =====

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

<code javascript>
import { 
  FormBuilder,  
  FormGroup,
  ReactiveFormsModule
} from '@angular/forms';

//...

  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: [''],
      city: [''],
      salary: ['']
    })
  }
</code>

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

===== Érvényesség ellenőrzése =====

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.

<code javascript>
import { 
  FormBuilder,  
  FormGroup,
  ReactiveFormsModule,
  Validators
} from '@angular/forms';
</code>

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

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