szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular űrlap ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2023, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Angular űrlapok =====

Az Angular kétféle űrlapot használ:
  * sablon-vezérelt
  * reaktív űrlap

Itt most a **sablon-vezérelt** űrlapról lesz szó.


===== Sablon-vezérelt űrlap =====

<code javascript src/app/emp/emp.component.ts>
import { FormsModule } from '@angular/forms';

@Component({
//...
  imports: [FormsModule],
//...
})

export class EmpComponent {
    name !: string;
}
</code>



A sablon-vezérelt űrlapokat az ngModel direktívával hozhatunk létre. 

<code html>
<input type="text" [(ngModel)]="name">
</code>

A [( )] zárójelekből kettő darab van, így kettős kötés jön létre:
  * [ngModel] - a TypeScript tartalma megjelenik a HTML oldalon
  * [(ngModel)] 
    * A TypeScript tartalma megjelenik a HTML lapon.
    * A HTML tartalma megjelenik a TypeSCript oldalon.


===== Űrlap tartalma =====

<code html5>
<input type="text" id="name" [(ngModel)]="name">

<button (click)="mehetGomb()">Mehet</button>
</code>

A [] zárójel kívül kell legyen.

<code javascript>
//...
export class AppComponent {

  name !: string;

  mehetGomb() {
    console.log(this.name);    
  }
}
</code>


===== Legördülő listadoboz =====

<code html5>

<select (change)="selectFruit($event)">
  <option value="1">alma</option>
  <option value="2">körte</option>
  <option value="3">barack</option>
  <option value="4">szilva</option>
</select>


</code>

<code javascript>
//...
export class AppComponent {
  selectFruit(event: any) {
    console.log(event.target.value);
  }
}
</code>

==== Második ====


<code html5 src/app/teker.component.html>
<select #fruit (change)="selectFruit(fruit.value)">
  <option value="1">alma</option>
  <option value="2">körte</option>
  <option value="3">barack</option>
  <option value="4">szilva</option>
</select>
</code>

<code javascript>
//...
  selectFruit(selected: string) {
    console.log(selected);
  }
</code>

===== Form elem =====

Ha form elemet használunk, be kell állítani kötelezően a name attribútumot.

<code html>
<form>
  <input type="text" id="fullname" name="fullname" [(ngModel)]="fullname">
</form>
</code>


===== Form elem submit eseménnyel =====


<code html>
<form (ngSubmit)="mehet()">
  <input type="text" id="name" [(ngModel)]="name"
  name="name">
  
  <button type="submit">Mehet</button>
</form>
</code>


<code javascript>
  name !: string;

  mehet() {
    console.log(this.name);
  }
</code>


Nem szükéséges a mehet() metódusban az preventDefault() mivel nem töltődik újra a weblap.