A sablon-vezérelt űrlapra példa:
<input id="name" type="text" [(ngModel)]="name">
Reaktív űrlap HTML része:
<input id="name" type="text" [formControl]="name">
TypeScript része:
name = new FormControl('');
//... import { ReactiveFormsModule } from '@angular/forms'; //... imports: [ BrowserModule, ReactiveFormsModule ],
ng generate component triangle
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); } }
<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:
<app-triangle></app-triangle>
A területet egy input elemben jelenítjük meg:
<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>
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-triangle></app-triangle>
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 { }
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}); }
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}); }
<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>
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-triangle></app-triangle>
A triangleForm objektumot az ngOnInit() metódusban készítjük elő.
<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>
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-triangle></app-triangle>
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:
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 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:
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}); } }
<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>