Tartalomjegyzék

< Angular

Angular - Űrlapok érvényessége

Validátorok

Reaktív űrlap modul

src/app/app.module.ts
//...
imports: [
    ReactiveFormsModule
];

Űrlap

src/app/app.component.html
<form [formGroup]="loginForm">
    <div class="form-group">
        <label>E-mail</label>
        <input type="email" class="form-control"
        formControlName="email">        
    </div>
    <div class="form-group">
        <label>Jelszó</label>
        <input type="password" class="form-control"
        formControlName="password">        
    </div>
 
    <button type="submit" class="btn btn-primary">Belép</button>
</form>

TypeScript

src/app/app.components.ts
import { FormControl, FormGroup, Validators } from '@angular/forms';
 
//...
 
export class AppComponent {
    loginForm = new FormGroup({
        email: new FormControl('', Validators.required),
        password: new FormControl('')
 
    })
}

Böngészőben

Ha invalid, látszik a böngésző fejlesztői felületén, az Elements fülön.

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

Ha érvényes:

ng-valid

CSS

Az attribútum alapján lehet egy kis piros széle, CSS-sel:

input.ng-invalid {
    border-left: 5px solid red;
}
input.ng-valid {
    border-left: 5px solid green;
}

Érvényesség

export class LoginComponent implements OnInit {
 
  loginForm !: FormGroup;
 
  constructor() { }
 
  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', Validators.required),
      password: new FormControl(''),
    })
  }
}
Ha több megkötést is alkalmazunk, akkor [ ] szögletes zárójelbe (tömbbe) kell tenni a megkötéseket!

Kötelezőnek jelölés és email:

email: new FormControl('', [Validators.required,Validators.email])

Minta használata:

name: new FormControl('', Validators.pattern('[a-z]'))

FormBuilder verzió

export class LoginComponent implements OnInit {
 
  loginForm !: FormGroup;
 
  constructor(private formBuilder: FormBuilder) { }
 
  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    })
 
  }
}

Segítő szöveg

Angular 12.x

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

Angular 13.x

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

Rövidítés

src/app/login.components.ts
//...
export class LoginComponent implements OnInit {
 
  loginForm !: FormGroup;
 
  constructor() { }
 
  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', Validators.required),
      password: new FormControl('')
    })
  }
  get email(){return this.loginForm.controls['email']}
}
src/app/login.components.ts
<!-- ... -->
<small *ngIf="email.invalid">E-mail kötelező</small>
<!-- ... -->
src/app/login.components.ts
<!-- ... -->
<small *ngIf="email.invalid && email.touched">E-mail kötelező</small>
<!-- ... -->