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.

--- oktatas:web:angular:angular_18_reaktiv_urlap_alcsoporttal_toembbel [2024/10/25 06:53] – [FormArray] admin
+++ oktatas:web:angular:angular_18_reaktiv_urlap_alcsoporttal_toembbel [2025/03/02 16:54] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:angular|< Angular]]
-====== Angular 18 Reaktív űrlap alcsoporttal, tömbbel ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2024, Sallai András
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
-  * Web: https://szit.hu
-===== FormArray =====
-A FormArray egy lehetőség az Angularban, hogy kezeljük a Form kontrollon belüli gyűjteményeket. A Form kontrollok lehetnek FormGroup, FormControl stb.
-Minden kontroll egy kulcs-érték párt képvisel. A FormArray segítségével a kontroll egy egész tömböt tartalmaz.
-===== TypeScript =====
-A példánkban a telefonszámokat szeretnénk tömbben tárolni. Szeretnék lehetőséget új telefonszámok felvételére, ami új űrlapelemeket jelenít meg, és azok törlésére.
-<code javascript src/app/app.component.ts>
-import { Component } from '@angular/core';
-import {
-  FormArray,
-  FormBuilder,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators
-} from '@angular/forms';
-import { RouterOutlet } from '@angular/router';
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet, ReactiveFormsModule],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
-})
-export class AppComponent {
-  title = 'app01';
-  employeeForm!: FormGroup;
-  constructor(private formBuilder: FormBuilder) {
-    this.employeeForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      address: this.formBuilder.group({
-        city: '',
-        street: ''
-      }),
-      salary: '',
-      phones: this.formBuilder.array([])
-    })
-  }
-  onSubmit() {
-    if(this.employeeForm.valid) {
-      console.log(this.employeeForm.value);
-    }
-  }
-  get phones(): FormArray {
-    return this.employeeForm.get('phones') as FormArray;
-  }
-  addPhone() {
-    this.phones.push(this.newPhone());
-  }
-  newPhone(): FormGroup {
-    return this.formBuilder.group({
-      phone: ''
-    });
-  }
-  removePhone(i: number) {
-    this.phones.removeAt(i);
-  }
-}
-</code>
-===== HTML Sablon =====
-A HTML sablonban a @for() direktívát használjuk, ami az Angular 17-ben jelent meg.
-<code javascript src/app/app.component.html>
-<form [formGroup]="employeeForm"
-  (ngSubmit)="onSubmit()">
-  <div class="formGroup">
-    <label for="name">Név</label>
-    <input type="text" id="name" formControlName="name"
-      placeholder="Név">
-  </div>
-  <div formGroupName="address">
-    <div class="formGroup">
-      <label for="city">Település</label>
-      <input type="text" id="city" formControlName="city"
-        placeholder="Település">
-    </div>
-    <div class="formGroup">
-      <label for="street">Lakcím</label>
-      <input type="text" id="street" formControlName="street"
-        placeholder="Lakcím">
-    </div>
-  </div>
-  <div class="formGroup">
-    <label for="salary">Fizetés</label>
-    <input type="text" id="salary" formControlName="salary"
-      placeholder="Fizetés">
-  </div>
-  <div>
-    <button type="button" (click)="addPhone()">Telefont hozzáad</button>
-  </div>
-  <div formArrayName="phones">
-    @for (phone of phones.controls; track phone; let i = $index) {
-        <div formGroupName="{{i}}">
-          <label for="phone">Telefonszám</label>
-          <input type="text" formControlName="phone">
-          <button type="button" (click)="removePhone(i)">Törlés</button>
-        </div>
-    }
-  </div>
-  <div>
-    <button type="submit" [disabled]="!employeeForm.valid">
-      Mehet
-    </button>
-  </div>
-</form>
-</code>
-===== Lehetséges eredmény =====
-Az adatokat ilyen formában kapjuk:
-<code javascript>
-{
-    "name": "Csontos Ernő",
-    "address": {
-        "city": "Szeged",
-        "street": "Tél utca 7"
-    },
-    "salary": "398",
-    "phones": [
-        {
-            "phone": "(30) 894-2348"
-        },
-        {
-            "phone": "(70) 834-2483"
-        }
-    ]
-}
-</code>
-===== A telefonszám típusát is megadjuk =====
-Egészítsük ki az alkalmazásunkat úgy, hogy a telefonszám típusát is tárolni tudjuk.
-Javítsuk a newPhone() metódust:
-<code javascript>
-  newPhone(): FormGroup {
-    return this.formBuilder.group({
-      type: '',
-      phone: ''
-    });
-  }
-</code>
-Javítsuk a phones tömb részt:
-<code html>
-  <div formArrayName="phones">
-    @for (phone of phones.controls; track phone; let i = $index) {
-        <div formGroupName="{{i}}">
-          <label for="type">Típus</label>
-          <input type="text" formControlName="type">
-          <br>
-          <label for="phone">Telefonszám</label>
-          <input type="text" formControlName="phone">
-          <button type="button" (click)="removePhone(i)">Törlés</button>
-        </div>
-    }
-  </div>
-</code>
-===== Webes nézet CSS nélkül =====
-A következő képen láthatjuk működés közben az alkalmazást.
-{{:oktatas:web:angular:alcsoport_tomb_minta_bongeszoben.png|}}
-===== GitHub és demó  =====
-  * https://github.com/oktat/exUrlapvariaco.git
-  * https://szit.hu/m/exUrlapvariacio