Tartalomjegyzék

< Angular

Angular űrlap

Angular űrlapok

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

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:

Ű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

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>