oktatas:web:angular:angular_reaktiv_urlapok
Tartalomjegyzék
Angular - Reaktív űrlapok
- Szerző: Sallai András
- Copyright © Sallai András, 2021, 2022, 2023
- Web: https://szit.hu
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