Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_reaktiv_urlapok

< Angular

Angular - Reaktív űrlapok

Angular űrlapok

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

Sablon-vezérelt űrlap

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

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

Reaktív űrlap

Reaktív űrlap HTML része:

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

TypeScript része:

name = new FormControl('');

Reaktív modul importálása

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

Űrlap

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

Kattintás

<form (ngSubmit)="onSubmit()">
  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  } 

Kimenet:

Mari
Pécs
391

Teljes kód

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);
  }  
}
oktatas/web/angular/angular_reaktiv_urlapok.txt · Utolsó módosítás: 2025/03/02 16:50 szerkesztette: admin