[[oktatas:web:angular|< Angular]] ====== Angular űrlap ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2022, 2023 * 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 =====


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.

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 =====

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


//...
export class AppComponent {

  name !: string;

  mehetGomb() {
    console.log(this.name);    
  }
}

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


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

==== Második ====


//...
  selectFruit(selected: string) {
    console.log(selected);
  }

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