Angular űrlap

• Szerző: Sallai András
• Copyright © Sallai András, 2022, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Az Angular kétféle űrlapot használ:

• sablon-vezérelt
• reaktív űrlap

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

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.

<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);    
  }
}

<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);
  }
}

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);
  }

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

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