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

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

<code html>
<form [formGroup]="employeeForm" (submit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input id="name" formControlName="name" />
  </div>

  <div>
    <label for="city">City:</label>
    <input id="city" formControlName="city" />
  </div>

  <div>
    <label for="salary">Salary:</label>
    <input id="salary" formControlName="salary" />
  </div>

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

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

@Component({
  selector: 'app-employee',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './employee.component.html',
  styleUrl: './employee.component.css'
})
export class EmployeeComponent {

  employeeForm!: FormGroup;

  constructor() {}
  ngOnInit() {
    this.employeeForm = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(3)]),
      city: new FormControl('', [Validators.required, Validators.minLength(3)]),
      salary: new FormControl(0, [Validators.required, Validators.pattern('^[0-9]+$')])
    });
  }

  onSubmit() {
    if (this.employeeForm.valid) {
      console.log('Form Submitted!', {
        name: this.employeeForm.value.name,
        city: this.employeeForm.value.city,
        salary: this.employeeForm.value.salary
      });
    } else {
      console.log('Form is invalid');
    }
  }
}

</code>