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

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

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

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

  * https://angular.io/api/forms/Validators/

===== Reaktív űrlap modul =====


<code javascript src/app/app.module.ts>
//...
imports: [
    ReactiveFormsModule
];
</code>

===== Űrlap =====

<code html 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>
</code>

===== TypeScript =====

<code javascript 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('')
    
    })
}
</code>

===== Böngészőben =====

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

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

Ha érvényes:
  ng-valid

===== CSS =====

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

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


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


===== Érvényesség =====

<code javascript>
export class LoginComponent implements OnInit {

  loginForm !: FormGroup;
  
  constructor() { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', Validators.required),
      password: new FormControl(''),
    })
  }
}
</code>

<note important>
Ha több megkötést is alkalmazunk, akkor [ ] szögletes zárójelbe (tömbbe) kell tenni a megkötéseket!
</note>

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>

==== FormBuilder verzió ====

<code javascript>
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]
    })
    
  }
}
</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>

===== Rövidítés =====

<code javascript 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']}
}

</code>


<code javascript src/app/login.components.ts>
<!-- ... -->
<small *ngIf="email.invalid">E-mail kötelező</small>
<!-- ... -->
</code>

<code javascript src/app/login.components.ts>
<!-- ... -->
<small *ngIf="email.invalid && email.touched">E-mail kötelező</small>
<!-- ... -->
</code>