Angular Reaktív űrlap csoportosítással

Szerző: Sallai András
Copyright © 2025, Sallai András
Licenc: 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.

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

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

Bemenet

<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 form előkészítése:

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

Kattintás

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

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

Kimenet:

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

Teljes kód

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>

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

Érvényesség ellenőrzése

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