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

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

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

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

Kimenet:

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

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

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

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