szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » angular » angular_reaktiv_urlapok
Nyomvonal:
oktatas:web:angular:angular_reaktiv_urlapok

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

Előző változat mindkét oldalonElőző változat
Következő változat		Előző változat
oktatas:web:angular:angular_reaktiv_urlapok [2025/03/02 16:47] – [Reaktív modul importálása] adminoktatas:web:angular:angular_reaktiv_urlapok [2025/03/02 16:50] (aktuális) – admin
Sor 32: Sor 32:
 name = new FormControl(''); name = new FormControl('');
 </code> </code>
-===== Reaktív modul importálása ===== 
  
 +===== Reaktív modul importálása =====
  
 <code javascript src/app/app.module.ts> <code javascript src/app/app.module.ts>
 //... //...
-import { ReactiveFormsModule } from '@angular/forms';+import {  
 +    FormControl,  
 +    FormsModule,  
 +    ReactiveFormsModule  
 +} from '@angular/forms';
 //... //...
   imports: [   imports: [
Sor 46: Sor 50:
  
  
-===== Legyen egy új komponens ===== 
  
-  ng generate component triangle+===== Űrlap =====
  
- 
-<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> <code html>
-<form [formGroup]="triangleForm" (ngSubmit)="onSubmit()">+<input type="text"  
 +    class="form-control"  
 +    id="name"  
 +    [formControl]="name">
  
-<!-- ... --> 
  
-<button type="submit">Számít</button>+<input type="text"  
 +    class="form-control"  
 +    id="city"  
 +    [formControl]="city">
  
-</code>+<input type="text"  
 +    class="form-control"  
 +    id="salary"  
 +    [formControl]="salary">
  
-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> </code>
  
- +A form előkészítése:
-==== 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> <code javascript>
-import { Component, OnInit } from '@angular/core'; +export class AppComponent { 
-import { FormControl, FormGroup } from '@angular/forms'; +  name = new FormControl(''); 
- +  city = new FormControl(''); 
-@Component({ +  salary = new FormControl('');
-  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> </code>
  
-<tabbox app.component.html> +===== Kattintás =====
- +
-<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> <code html>
-<h1>Háromszög</h1> +<form (ngSubmit)="onSubmit()">
- +
- +
-<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> </code>
- 
- 
-<tabbox triangle.component.ts> 
  
 <code javascript> <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() {   onSubmit() {
-    this.calcArea();     +    console.log(this.name.value); 
-  } +    console.log(this.city.value); 
-  calcArea() { +    console.log(this.salary.value); 
-    let area = Number(this.triangleForm.value.base) * +  } 
-      Number(this.triangleForm.value.height) / 2; +
-     +
-    this.triangleForm.patchValue({area: area}); +
-  } +
-} +
 </code> </code>
  
-<tabbox app.component.html> +Kimenet: 
- +<code> 
-<code html5> +Mari 
-<app-triangle></app-triangle>+Pécs 
 +391
 </code> </code>
  
 +===== Teljes kód =====
  
-</tabbox>+<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>
  
-===== FormBuilder használata ===== +  <div class="form-group"> 
- +    <label for="city">Település</label> 
-A FormBuilder a reaktív űrlapok készítését hivatott megkönnyíteni. +    <input type="text" 
-Lássuk a fenti programunkat, csak a TypeScript fájl változtatva: +      class="form-control" 
- +      id="city" 
-<code javascript src/app/triangle/triangle.component.ts> +      [formControl]="city"> 
-import { FormControl, FormGroup, FormBuilder } from '@angular/forms'; +  </div>
-//.. +
- +
-export class TriangleComponent implements OnInit { +
- +
-  triangleForm ! : FormGroup; +
- +
-  constructor(private formBuilder: FormBuilder) { } +
- +
-  ngOnInit(): void { +
-    this.triangleForm = this.formBuilder.group( { +
-      base: [''], +
-      height: [''], +
-      area: [''] +
-    });     +
-  }+
  
 +  <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>
  
- +<code javascript src/app/app.component.ts> 
- +import { Component } from '@angular/core'; 
-===== Érvényesítő beállítása ===== +import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
- +
-É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({ @Component({
-  selector: 'app-triangle', +  selector: 'app-root', 
-  templateUrl: './triangle.component.html', +  standalone: true, 
-  styleUrls: ['./triangle.component.css']+  imports: [FormsModule, ReactiveFormsModule], 
 +  templateUrl: './app.component.html', 
 +  styleUrl: './app.component.css'
 }) })
-export class TriangleComponent implements OnInit { +export class AppComponent { 
- +  name = new FormControl(''); 
-  triangleForm ! : FormGroup; +  city = new FormControl(''); 
- +  salary = new FormControl('');
-  constructor(private formBuilder: FormBuilder) { } +
- +
-  ngOnInit(): void { +
-    this.triangleForm = this.formBuilder.group( { +
-      base: ['', Validators.required], +
-      height: ['', Validators.required], +
-      area: [''] +
-    });     +
-  }+
  
   onSubmit() {   onSubmit() {
-    this.calcArea();     +    console.log(this.name.value); 
-  } +    console.log(this.city.value); 
-  calcArea() { +    console.log(this.salary.value); 
-    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> </code>
Sor 517: Sor 167:
  
  
-</tabbox> 
- 
- 
- 
-===== Linkek ===== 
-  * https://angular.io/guide/reactive-forms (2021) 
oktatas/web/angular/angular_reaktiv_urlapok.1740930429.txt.gz · Utolsó módosítás: 2025/03/02 16:47 szerkesztette: admin