oktatas:web:angular:angular_urlapok
Tartalomjegyzék
Angular űrlap
- Szerző: Sallai András
- Copyright © Sallai András, 2022, 2023
- 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
- src/app/emp/emp.component.ts
import { FormsModule } from '@angular/forms'; @Component({ //... imports: [FormsModule], //... }) export class EmpComponent { name !: string; }
A sablon-vezérelt űrlapokat az ngModel direktívával hozhatunk létre.
<input type="text" [(ngModel)]="name">
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
<input type="text" id="name" [(ngModel)]="name"> <button (click)="mehetGomb()">Mehet</button>
A [] zárójel kívül kell legyen.
//... export class AppComponent { name !: string; mehetGomb() { console.log(this.name); } }
Legördülő listadoboz
<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>
//... export class AppComponent { selectFruit(event: any) { console.log(event.target.value); } }
Második
- 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>
//... selectFruit(selected: string) { console.log(selected); }
Form elem
oktatas/web/angular/angular_urlapok.txt · Utolsó módosítás: 2024/03/03 21:06 szerkesztette: admin