[[oktatas:web:angular|< Angular]]

====== Angular - Űrlapok érvényessége ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2024, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Kezdő projekt =====

Készítsünk egy új projektet **valid** néven.

  ng new valid

Készítsünk egy login komponenst.
  cd valid
  ng generate component login

Importálnunk kell a LoginComponent a TypeScript oldalon. A **app.component.ts** fájlban:

<code javascript>
import { LoginComponent } from './login/login.component';
//...
  imports: [LoginComponent],
//...
</code>


Építsük az **app.component.html** sablonba a login komponenst:

<code>
<app-login />
</code>


===== A login űrlap =====

Készítsük el a beléptető felületet. 

Kezdjük a TypeScript oldalon. A login.component.ts fájlban importáljuk a **FormBuilder** és a **ReactiveFormsModule** modulokat. A ReactiveFormsModule-t a dekorátorban is importálni kell.

<code javascript>
import { 
    FormBuilder, 
    ReactiveFormsModule 
} from '@angular/forms';
//...

  imports: [ReactiveFormsModule],
</code>

Injektáljuk a FormBuilder modult a konstruktorban, hogy használható legyen:

<code javascript>
  constructor(private builder: FormBuilder) { }
</code>

Készítsük el a **loginForm** objektumot.

<code javascript>
  loginForm = this.builder.group({
    username: [''],
    password: ['']
  }) 
</code>


Kezdjük a HTML sablonban egy form elemmel:
<code html>
<form [formGroup]="loginForm"></form>
</code>

Egészítsük ki beviteli mezőkkel:

<code html>
  <div>
    <label for="username">Felhasználónév</label>
    <input type="text" id="username" formControlName="username">
  </div>
  <div>
    <label for="password">Jelszó</label>
    <input type="password" id="password" formControlName="password">
  </div>
</code>

A teljes kód:

<code javascript src/app/login/login.component.ts>
import { Component } from '@angular/core';
import { 
  FormBuilder,
  ReactiveFormsModule
} from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

  constructor(private builder : FormBuilder) {}

  loginForm = this.builder.group({
    username: [''],
    password: ['']
  });

}
</code>

Az űrlap:

<code html src/app/login/login.component.html>
<h1>Bejelentkezés</h1>

<form [formGroup]="loginForm">
  <div>
    <label for="username">Felhasználónév</label>
    <input type="text" id="username" 
    formControlName="username">
  </div>
  <div>
    <label for="password">Jelszó</label>
    <input type="text" id="password" 
    formControlName="password">
  </div>

</form>
</code>

===== Állapotosztályok =====

A reaktív űrlap különböző állapotosztályokat ad form és input elemekhez.

<code html>
<form class="ng-untouched ng-pristine ng-valid">
</code>

Minden input elem külön állapotosztályt kap:

<code html>
<input class="ng-untouched ng-pristine ng-valid">
</code>

A következő táblázat alapján kideríthetjük milyen állapotban van az űrlapunk:

| ng-pristine | Az űrlap még érintetlen eredeti. |
| ng-dirty | Az űrlap már érintett, nem az eredeti. |
| ng-touched | Egyszer érintve volt. |
| ng-untouched | Már nem érintetlen |
| ng-valid | Érvényes |
| ng-invalid | Nem érvényes |

Indítsuk el a projektünket én nézzük meg az űrlapot a böngészőben. A böngészőben váltsunk a fejlesztői felületre, ott válasszuk az **Elements** fület.


<code html>
<input class="form-control" ng-invalid>
                         <--^^^^^^^^^^ -->
</code>


===== Érvényességhez szükséges modul =====

Az érvényesség ellenőrzéséhez szükségünk van a Validators modulra.

<code javascript src/app/app.module.ts>
import { 
  FormBuilder
  ReactiveFormsModule, 
  
  Validators //<--
} from '@angular/forms';
</code>

===== Felhasználónév megkövetelése =====

Most állítsuk be a felhasználónévhez érvényességvizsgálatot.

<code javascript>
  loginForm = this.builder.group({
    username: ['', Validators.required],
    password: ['']
  });
</code>

Nézzük meg most a böngésző fejlesztői felületén az input elem állapotát.
Az állapotok a következők:

form:
  * ng-untouched
  * ng-pristine
  * ng-invalid ⇦

input username:
  * ng-untouched
  * ng-pristine
  * ng-invalid ⇦


input password:
  * ng-untouched
  * ng-pristine
  * ng-valid


===== Validátorok =====

Használható statikus függvények a Validators osztályon.

  * min()
  * max()
  * required()
  * requiredTrue()
  * email()
  * minLength()
  * maxLength()
  * patter(sztring)
  * nullValidator()
  * compose()
  * composeAsync()

Több információ:
  * https://angular.dev/api/forms/Validators


===== CSS kiemelések =====



Az attribútum alapján lehet egy kis piros széle, CSS-sel. A login.component.css fájlban
állítsuk be:

<code css>
input.ng-invalid {
    border-left: 5px solid red;
}

input.ng-valid {
    border-left: 5px solid green;
}
</code>

Egyszerre ng-invalid és ng-touched attribútum elvárás:

<code css>
input.ng-invalid.ng-touched {
  border: 3px solid red;  
}

input.ng-valid {
  border: 3px solid lightgreen;
}

</code>

===== Több érvényesítő =====

Ha több érvényesítőt is megadunk, tegyük azokat egy újabb szögletes zárójelbe.

<code javascript>
    this.loginForm = this.builder.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      password: ['']
    })
</code>





===== E-mail =====

Kötelezőnek jelölés és email:
<code javascript>
email: new FormControl('', [Validators.required,Validators.email])
</code>


===== Minta használata =====

<code javascript>
name: new FormControl('', Validators.pattern('[a-z]'))
</code>


===== Segítő szöveg =====

==== Angular 12.x ====

<code html>
<small *ngIf="loginForm.controls.email.invalid">
</code>

<code html>
<small *ngIf="loginForm.controls.email.invalid && loginForm.controls.email.touched">
</code>

==== Angular 13.x ====

<code html>
<small *ngIf="loginForm.controls['email'].invalid">
</code>

<code html>
<small *ngIf="loginForm.controls['email'].invalid && loginForm.controls['email'].touched">
</code>

==== Angular 19.x ====

<code html>
    @if(loginForm.controls.username.invalid){
      <small>Hiba</small>
    }
</code>

<code html>
    @if(
      loginForm.controls.username.invalid &&
      loginForm.controls.username.touched
      ){
      <small>Hiba</small>
    }
</code>

===== A követelmények szétválasztása =====

<code angular>
@if(
  loginForm.controls['username'].errors?.['required']
  && loginForm.controls['username'].touched        
    ){
  <small>Kötelező kitölteni</small>
}
@if(
  loginForm.controls['username'].errors?.['minlength']
  && loginForm.controls['username'].touched
    ){
  <small>Minimum 3 karakter</small>
  }
</code>


===== Saját érvényesítő =====

Egy direktívát fogunk létrehozni forbiddenName elnevezéssel, ahol az admin nevet nem engedjük meg.

  ng generate directive shared/forbiddenName

A következő fájlok jönnek létre:

  * src/shared/forbidden-name.directive.spec.ts
  * src/shared/forbidden-name.directive.ts

A .ts fájl tartalmát írjuk át így:

<code javascript src/shared/forbidden-name.directive.ts>
import { Directive } from '@angular/core';
import { 
  AbstractControl, 
  ValidationErrors,
  ValidatorFn 
} from '@angular/forms';

@Directive({
  selector: '[appForbiddenName]',
  standalone: true
})
export class ForbiddenNameDirective{

  static validate(forbiddenName: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = /admin/.test(control.value);
      return forbidden ? { 'forbiddenName': { value: control.value } } : null;
    }
  }
}

</code>

==== Használat ====

<code javascript>
  loginForm = this.builder.group({
    username: ['', [
      Validators.required, 
      Validators.minLength(3),
      ForbiddenNameDirective.validate(/admin/i)
    ]],
    password: ['']
  });

</code>


==== Segítő üzenet ====

<code html>
    @if(
      loginForm.controls['username'].errors?.['forbiddenName']
      && loginForm.controls['username'].touched
        ){
      <small>Admin nem megengedett</small>
      }
</code>

==== Lásd még ====

  * https://angular.dev/api/forms/Validator

===== Saját érvényesítő függvénnyel =====

  ng generate directive shared/forbiddenName

A generált állományban találunk egy előre létrehozott osztályt. Az egész állomány
tartalmát törölhetjük. Új tartalom:

<code javascript src/app/shared/forbidden-name-validator.directive.ts>
import { 
  AbstractControl, 
  ValidationErrors, 
  ValidatorFn 
} from "@angular/forms";

export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = forbiddenName.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  }
}
</code>


=== Az érvényesítő használata ===

<code javascript>
import { forbiddenNameValidator } from './shared/forbidden-name-validator.directive';

//...

  ngOnInit() {
    this.employeeForm = this.formBuilder.group({
      name: ['', [
        Validators.required, 
        Validators.minLength(3),
        forbiddenNameValidator(/admin/i)
      ]],
      city: [''],
      salary: ['']
    })
  }
</code>

Megtiltjuk az admin név beírását.


HTML sablonban reagálunk az ilyen hibákra:

<code html>
    @if(employeeForm.controls['name'].errors?.['forbiddenName']) {
      <span>A név nem megengedett.</span>
    }
</code>

===== Saját érvényesítő 3 =====

Validátor generálása:
  ng generate directive shared/forbiddenNameValidator

<code javascript src/app/shared/forbidden-name-validator.directive.ts>
import { Directive } from '@angular/core';
import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[forbiddenNameValidator]',
  standalone: true
})
export class ForbiddenNameValidatorDirective implements Validator {

  constructor() { }

  validate(control: AbstractControl): ValidationErrors | null {
    const forbidden = /admin/.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  }

}

</code>

Használat:

<code javascript>
  loginForm = this.builder.group({
    username: ['', [
      Validators.required, 
      Validators.minLength(3),
      new ForbiddenNameValidatorDirective
    ]],
</code>

Segítő szöveg:
<code html>
    @if(
      loginForm.controls['username'].errors?.['forbiddenName']
      && loginForm.controls['username'].touched
        ){
      <small>Admin nem megengedett</small>
      }
</code>

===== Jelszó érvényessége =====

Minta jelszó érvényesítéshez:
<code javascript>
const pattern = '^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)[A-Za-z\\d]{8,}$';
</code>


Megkövetelejük:
  * legyen benne nagybetű (az első zárójeles rész)
  * legyen benne kisbetű (a második zárójeles rész)
  * legyen benne szám (a harmadik zárójeles rész)
  * csak nagy vagy kisbetű és szám lehet (a szögletes zárójel)
  * minimum 8 (a kapcsos zárójel)

<code javascript src/app/login/login.component.ts>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

  loginForm !: FormGroup;

  constructor(
    private builder: FormBuilder
  ) { }

  ngOnInit(): void {
    const pattern = '^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)[A-Za-z\\d]{8,}$';
    this.loginForm = this.builder.group({
      name: [''],
      password: ['', Validators.pattern(pattern)]
    });
  }

  login() {
    console.log(this.loginForm.value);
  }

}

</code>


Példa ha csak kisbetűket fogadunk el, de annak kötelezően lennie kell:

<code javascript>
Validators.pattern(/^(?=.*[a-z])[a-z]+$/)
</code>

Csak kisbetűk és számok:
<code javascript>
Validators.pattern(/^(?=.*[a-z])(?=.*[0-9])[a-z0-9]+$/)
</code>

Vagy:

<code javascript>
Validators.pattern(/^(?=.*[a-z0-9])[a-z0-9]+$/)
</code>

Jelszavakhoz több követelmény Validators osztállyal:
<code javascript>
    password: ['', [
      Validators.required, 
      Validators.minLength(6), 
      Validators.maxLength(12), 
      Validators.pattern(/^(?=.*[a-z])(?=.*[0-9])[a-z0-9]+$/)
    ]],
</code>

===== Kattintás =====

<code javascript>
export class LoginComponent {

  //...

  onSubmit() {
    console.log(this.loginForm.value);
  }

}

</code>


<code html>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Felhasználónév</label>
    <input type="text" id="username" formControlName="username">
  </div>
  <div>
    <label for="password">Jelszó</label>
    <input type="password" id="password" formControlName="password">
  </div>

  <button type="submit">Bejelentkezés</button>

</form>
</code>



===== Források =====

  * https://angular.dev/cli/generate/directive (2024)
  * https://v18.angular.dev/guide/forms/form-validation (2024)