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

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

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

===== Angular érvényesség Bootstrap mellett =====

Az Angular-t a Bootstrap érvényesség ellenőrzésével szeretnénk használni.

Alapértelmezetten a Bootstrap a HTML elemek attribútumait figyeli ellenőrzések során.
Például:

<code html>
<input required>
</code>


Nem használhatjuk a [disabled] attribútumot:

<code html>
<button [disabled]="employeeForm.invalid">
</code>

A érvényesség ellenőrzés a gomb kattintására indul el.
===== JavaScript kód =====

Be kell illesztenünk egy JavaScript kódot a működéshez. A kód a [[https://getbootstrap.com/docs/5.3/forms/validation/|Bootstrap weboldaláról]] van,
de két helyen ki kell egészíteni típussal.

<code javascript>
  ngOnInit() {

    this.empForm = this.builder.group({
      firstName: new FormControl('', [Validators.required, Validators.minLength(2)]),
      lastName: new FormControl('', [Validators.required, Validators.minLength(2)]),
      username: new FormControl('', [Validators.required, Validators.minLength(3)]),
      city: new FormControl('', [Validators.required, Validators.minLength(3)]),
      state: new FormControl('', [Validators.required]),
      zip: new FormControl('', [Validators.required, Validators.pattern('^[0-9]{5}$')]),
      terms: new FormControl(false, [Validators.requiredTrue])
    });

    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (() => {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      const forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.from(forms).forEach((form: any) => {
        form.addEventListener('submit', (event:Event) => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        }, false)
      })
    })()

  }

</code>

Az eredeti Bootstrap weboldalon található mintához tettünk a form needs-validation osztályt, és 
a @ jelet lecseréltük a következőre: &#64; 

<code html>
<form class="row g-3 needs-validation">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">First name</label>
    <input type="text" class="form-control" 
    id="validationDefault01" value="Mark" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">Last name</label>
    <input type="text" class="form-control" 
    id="validationDefault02" value="Otto" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">&#64;</span>
      <input type="text" class="form-control" 
      id="validationDefaultUsername" 
      aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationDefault03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label">State</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="validationDefault05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" 
      id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
</code>

Az űrlap továbbiakban ki kell egészíteni, például a form elemet:
<code>
[formGroup]="empForm"
</code>

Az input elemeket:

<code>
formControlName="firstName"
</code>

===== Angular érvényesség - Bootstrap megjelenítés =====

Az angular **ng-valid**, **ng-invalid** és hasonló attribútumokat használ.
A Bootstrap az **is-valid** és az **is-invalid** attribútumokkal dolgozik. Az Angular
ugyan nem hoz létre ilyen attribútumokat alapértelmezetten, de néhány sorral 
megoldható, hogy létrejöjjenek.

Település esetén például:

<code javascript>
[class.is-invalid]="employeeForm.get('city')?.invalid 
    && employeeForm.get('city')?.touched"
[class.is-valid]="employeeForm.get('city')?.valid 
    && employeeForm.get('city')?.touched"
</code>

Kicsit több az input elemből:

<code javascript>
  <div>
    <label for="city" class="form-label">Település</label>
    <input id="city" formControlName="city" 
    class="form-control"
    [class.is-invalid]="employeeForm.get('city')?.invalid 
    && employeeForm.get('city')?.touched"
    [class.is-valid]="employeeForm.get('city')?.valid 
    && employeeForm.get('city')?.touched"
    />

      <div class="invalid-feedback">Nem megfelelő település</div>
      <div class="valid-feedback">Jónak látszik</div>
  </div>
</code>