Angular - Reaktív űrlapok

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

• sablon-vezérelt űrlap
• reaktív űrlap

A sablon-vezérelt űrlapra példa:

<input id="name" type="text" [(ngModel)]="name">

Reaktív űrlap HTML része:

<input id="name" type="text" [formControl]="name">

TypeScript része:

name = new FormControl('');

src/app/app.module.ts

//...
import { 
    FormControl, 
    FormsModule, 
    ReactiveFormsModule 
} from '@angular/forms';
//...
  imports: [
    ReactiveFormsModule
  ],

<input type="text" 
    class="form-control" 
    id="name" 
    [formControl]="name">
 
 
<input type="text" 
    class="form-control" 
    id="city" 
    [formControl]="city">
 
<input type="text" 
    class="form-control" 
    id="salary" 
    [formControl]="salary">

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

export class AppComponent {
  name = new FormControl('');
  city = new FormControl('');
  salary = new FormControl('');
}

<form (ngSubmit)="onSubmit()">

  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  } 

Kimenet:

Mari
Pécs
391

src/app/app.component.html

<form (ngSubmit)="onSubmit()">
 
  <div class="form-group">
    <label for="name">Név</label>
    <input type="text"
    class="form-control"
    id="name"
    [formControl]="name">
  </div>
 
  <div class="form-group">
    <label for="city">Település</label>
    <input type="text"
      class="form-control"
      id="city"
      [formControl]="city">
  </div>
 
  <div class="form-group">
    <label for="salary">Fizetés</label>
    <input type="text"
      class="form-control"
      id="salary"
      [formControl]="salary">
  </div>
 
  <button type="submit" 
  class="btn btn-primary">
    Küld
  </button> 
 
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  name = new FormControl('');
  city = new FormControl('');
  salary = new FormControl('');
 
  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  }  
}