[[oktatas:web:angular|< Angular]]

====== Angular Reaktív űrlap csoportosítással ======

  * **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 =====

Szükségünk lesz a FormGroup és a ReactiveFormsModule-ra. A ReactiveFormsModule-t az imports részben is szerepeltetni kell.

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

//...

imports: [ReactiveFormsModule],

//...

employeeForm!: FormGroup;
</code>

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

</form>
</code>

===== Bemenet =====

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

A form előkészítése:

<code javascript>
  ngOnInit() {
    this.employeeForm = new FormGroup({
      name: new FormControl(''),
      city: new FormControl(''),
      salary: new FormControl('')
    });
  }
</code>

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

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

<code javascript>
  onSubmit() {
    console.log(this.employeeForm.value);
  }
</code>

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

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

<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">Felvesz</button>

</form>
</code>

<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';
import { 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 {
  title = 'app13';
  employeeForm!: FormGroup;

  ngOnInit() {
    this.employeeForm = new FormGroup({
      name: new FormControl(''),
      city: new FormControl(''),
      salary: new FormControl('')
    });
  }

  onSubmit() {
    console.log(this.employeeForm.value);
  }
}

</code>