Tartalomjegyzék

Angular - Reaktív űrlapok

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

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

Legyen egy új komponens

ng generate component triangle

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

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>

Tegyük az app.component.html sablonba:

src/app/app.component.html

<app-triangle></app-triangle>

Továbbfejlesztve

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

triangle.component.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>

triangle.component.ts

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

app.component.html

src/app/app.component.html

<app-triangle></app-triangle>

app.module.ts

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 { }

Űrlapvezérlők csoportosítása

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

import { FormControl, FormGroup } from '@angular/forms';

Használat:

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

A TypeScript ebben az esetben:

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

submit()

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

A form elembe:

<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">
 
<!-- ... -->
 
<button type="submit">Számít</button>

A TypeScript fájlban:

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

Teljes kód

triangle.component.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>

triangle.component.ts

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

app.component.html

<app-triangle></app-triangle>

Teljes kód átszervezve

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

triangle.component.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>

triangle.component.ts

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

app.component.html

<app-triangle></app-triangle>

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:

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: ['']
    });    
  }

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

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

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

A sablonfájlban:

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

A teljes kód:

triangle.component.ts

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

triangle.component.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>

Linkek

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