[[oktatas:web:angular|< Angular]]

====== Angular - Reaktív űrlapok ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Angular űrlapok =====

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

==== Sablon-vezérelt űrlap ====

A sablon-vezérelt űrlapra példa:
<code html>
<input id="name" type="text" [(ngModel)]="name">
</code>


==== Reaktív űrlap ====

Reaktív űrlap HTML része:
<code html>
<input id="name" type="text" [formControl]="name">
</code>

TypeScript része:
<code javascript>
name = new FormControl('');
</code>

===== Reaktív modul importálása =====

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

</code>



===== Űrlap =====

<code html>
<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">

</code>

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

<code javascript>
export class AppComponent {
  name = new FormControl('');
  city = new FormControl('');
  salary = new FormControl('');
}
</code>

===== Kattintás =====

<code html>
<form (ngSubmit)="onSubmit()">
</code>

<code javascript>
  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  } 
</code>

Kimenet:
<code>
Mari
Pécs
391
</code>

===== Teljes kód =====

<code html 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>
</code>

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

</code>