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

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

A sablon-vezérelt űrlapra példa:

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

Reaktív űrlap HTML része:

<input id="name" type="text" [formControl]="name">

TypeScript része:

name = new FormControl('');

src/app/app.module.ts

//...
import { 
    FormControl, 
    FormsModule, 
    ReactiveFormsModule 
} from '@angular/forms';
//...
  imports: [
    ReactiveFormsModule
  ],

<input type="text" 
    class="form-control" 
    id="name" 
    [formControl]="name">
 
 
<input type="text" 
    class="form-control" 
    id="city" 
    [formControl]="city">
 
<input type="text" 
    class="form-control" 
    id="salary" 
    [formControl]="salary">

A form előkészítése:

export class AppComponent {
  name = new FormControl('');
  city = new FormControl('');
  salary = new FormControl('');
}

<form (ngSubmit)="onSubmit()">

  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  } 

Kimenet:

Mari
Pécs
391

src/app/app.component.html

<form (ngSubmit)="onSubmit()">
 
  <div class="form-group">
    <label for="name">Név</label>
    <input type="text"
    class="form-control"
    id="name"
    [formControl]="name">
  </div>
 
  <div class="form-group">
    <label for="city">Település</label>
    <input type="text"
      class="form-control"
      id="city"
      [formControl]="city">
  </div>
 
  <div class="form-group">
    <label for="salary">Fizetés</label>
    <input type="text"
      class="form-control"
      id="salary"
      [formControl]="salary">
  </div>
 
  <button type="submit" 
  class="btn btn-primary">
    Küld
  </button> 
 
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  name = new FormControl('');
  city = new FormControl('');
  salary = new FormControl('');
 
  onSubmit() {
    console.log(this.name.value);
    console.log(this.city.value);
    console.log(this.salary.value);
  }  
}

<form (submit)="onSubmit($event)">
  <div>
    <label for="name">Name:</label>
    <input id="name" [formControl]="name" />
  </div>
 
  <div>
    <label for="city">City:</label>
    <input id="city" [formControl]="city" />
  </div>
 
  <div>
    <label for="salary">Salary:</label>
    <input id="salary" [formControl]="salary" />
  </div>
 
 
  <button type="submit">Submit</button>
 
</form>

  name = new FormControl('', [Validators.required, Validators.minLength(3)]);
  city = new FormControl('');
  salary = new FormControl(0);

  onSubmit(event: Event) {
    event.preventDefault();
    if (this.name.valid) {
      console.log('Form Submitted!', {
        name: this.name.value,
        city: this.city.value,
        salary: this.salary.value
      });
    } else {
      console.log('Form is invalid');
    }
  }

Szeretnénk tiltani a nyomógombot, ha érvénytelen a name mező.

<button type="submit" [disabled]="this.name.invalid">Submit</button>

Több mező érvényességének figyelése:

<button type="submit" 
  [disabled]="!name.valid || !city.valid || !salary.valid">
Submit
</button>

  ngOnInit() {
    this.name.valueChanges.subscribe(value => {
      console.log('Name changed to:', value);
    });
  }