[[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 { ReactiveFormsModule } from '@angular/forms';
//...
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

</code>


===== Legyen egy új komponens =====

  ng generate component triangle


<code javascript src/app/triangle/triangle.component.ts>
import { FormControl } from '@angular/forms';
//...
export class TriangleComponent implements OnInit {
  base = new FormControl('');
  height = new FormControl('');

  calcArea() {
    let area = Number(this.base.value) *
      Number(this.height.value) / 2;
    alert("Terület: " + area);
  }  
      
}

</code>


<code html src/app/triangle/triangle.component.html>
<h1>Háromszög</h1>

<label for="base">Alap</label>
<input type="text" id="base" [formControl]="base">
<br>

<label for="height">Magasság</label>
<input type="text" id="height" [formControl]="height">
<br>

<button (click)="calcArea()">Számít</button>
</code>

Tegyük az app.component.html sablonba:

<code javascript src/app/app.component.html>
<app-triangle></app-triangle>
</code>



==== Továbbfejlesztve ====

A területet egy input elemben jelenítjük meg:

<tabbox triangle.component.html>
<code html src/app/triangle/triangle.component.html>
<h1>Háromszög</h1>

<label for="base">Alap</label>
<input type="text" id="base" [formControl]="base">
<br>

<label for="height">Magasság</label>
<input type="text" id="height" [formControl]="height">
<br>

<button type="button" (click)="calcArea()">Számít</button>
<br>

<label>Terület</label>
<input type="text" [formControl]="area">
<br>
</code>

<tabbox triangle.component.ts>

<code javascript src/app/triangle/triangle.component.ts>
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-triangle',
  templateUrl: './triangle.component.html',
  styleUrls: ['./triangle.component.css']
})
export class TriangleComponent implements OnInit {

  base = new FormControl('');
  height = new FormControl('');
  area = new FormControl('');

  constructor() { }

  ngOnInit(): void {
  }

  calcArea() {
    let area = Number(this.base.value) *
      Number(this.height.value) / 2;
    this.area.setValue(area);
  }
}
</code>

<tabbox app.component.html>
<code html src/app/app.component.html>
<app-triangle></app-triangle>
</code>


<tabbox app.module.ts>

<code javascript src/app/app.module.ts>
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { VehicleComponent } from './vehicle/vehicle.component';

@NgModule({
  declarations: [
    AppComponent,
    VehicleComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

</code>

</tabbox>


===== Űrlapvezérlők csoportosítása =====

Importáljuk a FromGroup osztályt a triangle.components.ts fájlban.

<code javascript>
import { FormControl, FormGroup } from '@angular/forms';
</code>

Használat:

<code javascript>
  triangleForm = new FormGroup( {
    base: new FormControl(''),
    height: new FormControl(''),
    area: new FormControl('')
  })
</code>

A TypeScript ebben az esetben:
<code javascript>
  calcArea() {
    let area = Number(this.triangleForm.value.base) *
      Number(this.triangleForm.value.height) / 2;
    
    this.triangleForm.patchValue({area: area});
  }
</code>

==== submit() ====

Kattintás helyett most ngSubmit eseményre fogunk űrlapot küldeni.

A form elembe:
<code html>
<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">

<!-- ... -->

<button type="submit">Számít</button>

</code>

A TypeScript fájlban:
<code javascript>
  onSubmit() {
    this.calcArea();    
  }
  calcArea() {
    let area = Number(this.triangleForm.value.base) *
      Number(this.triangleForm.value.height) / 2;
    
    this.triangleForm.patchValue({area: area});
  }
</code>


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

<tabbox triangle.component.html>

<code html>
<h1>Háromszög</h1>


<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">
    <label for="base">Alap</label>
    <input type="text" id="base" formControlName="base">
    <br>
    
    <label for="height">Magasság</label>
    <input type="text" id="height" formControlName="height">
    <br>
    
    <button type="submit">Számít</button>
    <br>
    
    <label>Terület</label>
    <input type="text" formControlName="area">
    <br>
</form>


</code>


<tabbox triangle.component.ts>

<code javascript>
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-triangle',
  templateUrl: './triangle.component.html',
  styleUrls: ['./triangle.component.css']
})
export class TriangleComponent implements OnInit {

  triangleForm = new FormGroup( {
    base: new FormControl(''),
    height: new FormControl(''),
    area: new FormControl('')
  });


  constructor() { }

  ngOnInit(): void {
  }

  onSubmit() {
    this.calcArea();    
  }
  calcArea() {
    let area = Number(this.triangleForm.value.base) *
      Number(this.triangleForm.value.height) / 2;
    
    this.triangleForm.patchValue({area: area});
  }
}

</code>

<tabbox app.component.html>

<code html5>
<app-triangle></app-triangle>
</code>


</tabbox>





==== Teljes kód átszervezve ====

A triangleForm objektumot az ngOnInit() metódusban készítjük elő.

<tabbox triangle.component.html>

<code html>
<h1>Háromszög</h1>


<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">
    <label for="base">Alap</label>
    <input type="text" id="base" formControlName="base">
    <br>
    
    <label for="height">Magasság</label>
    <input type="text" id="height" formControlName="height">
    <br>
    
    <button type="submit">Számít</button>
    <br>
    
    <label>Terület</label>
    <input type="text" formControlName="area">
    <br>
</form>


</code>


<tabbox triangle.component.ts>

<code javascript>
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-triangle',
  templateUrl: './triangle.component.html',
  styleUrls: ['./triangle.component.css']
})
export class TriangleComponent implements OnInit {


  triangleForm ! : FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.triangleForm = new FormGroup( {
      base: new FormControl(''),
      height: new FormControl(''),
      area: new FormControl('')
    });  
  }

  onSubmit() {
    this.calcArea();    
  }
  calcArea() {
    let area = Number(this.triangleForm.value.base) *
      Number(this.triangleForm.value.height) / 2;
    
    this.triangleForm.patchValue({area: area});
  }
}

</code>

<tabbox app.component.html>

<code html5>
<app-triangle></app-triangle>
</code>


</tabbox>


===== FormBuilder használata =====

A FormBuilder a reaktív űrlapok készítését hivatott megkönnyíteni.
Lássuk a fenti programunkat, csak a TypeScript fájl változtatva:

<code javascript src/app/triangle/triangle.component.ts>
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
//..

export class TriangleComponent implements OnInit {

  triangleForm ! : FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.triangleForm = this.formBuilder.group( {
      base: [''],
      height: [''],
      area: ['']
    });    
  }


</code>



===== Érvényesítő beállítása =====

Érvényesítő beállítása a TypeScript fájlban:

<code javascript>
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
//...
      base: ['', Validators.required],
      height: ['', Validators.required],
</code>

A sablonfájlban:
<code html>
    <input type="text" id="base" formControlName="base" required>
    <span *ngIf="triangleForm.controls['base'].errors?.['required']">
        Az alap megadása kötelező.
    </span>
</code>


A teljes kód:

<tabbox triangle.component.ts>
<code javascript>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-triangle',
  templateUrl: './triangle.component.html',
  styleUrls: ['./triangle.component.css']
})
export class TriangleComponent implements OnInit {

  triangleForm ! : FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.triangleForm = this.formBuilder.group( {
      base: ['', Validators.required],
      height: ['', Validators.required],
      area: ['']
    });    
  }

  onSubmit() {
    this.calcArea();    
  }
  calcArea() {
    let area = Number(this.triangleForm.value.base) *
      Number(this.triangleForm.value.height) / 2;
    
    this.triangleForm.patchValue({area: area});
  }
}
</code>


<tabbox triangle.component.html>

<code html>
<h1>Háromszög</h1>


<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">
    <label for="base">Alap</label>
    <input type="text" id="base" formControlName="base" required>
    <span *ngIf="triangleForm.controls['base'].errors?.['required']">
        Az alap megadása kötelező.
    </span>
    <br>
    
    <label for="height">Magasság</label>
    <input type="text" id="height" formControlName="height">
    <span *ngIf="triangleForm.controls['height'].errors?.['required']">
        A magasság megadása kötelező.
    </span>
    <br>
    
    <button type="submit">Számít</button>
    <br>
    
    <label>Terület</label>
    <input type="text" formControlName="area">
    <br>
</form>


</code>



</tabbox>



===== Linkek =====
  * https://angular.io/guide/reactive-forms (2021)