Tartalomjegyzék

< Angular

Angular - Űrlapok érvényessége Bootstrap

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: 

<input required>

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

<button [disabled]="employeeForm.invalid">

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 Bootstrap weboldaláról van, de két helyen ki kell egészíteni típussal. 

  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)
      })
    })()
 
  }

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; 

<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>

Az űrlap továbbiakban ki kell egészíteni, például a form elemet: 

[formGroup]="empForm"

Az input elemeket: 

formControlName="firstName"

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: 

[class.is-invalid]="employeeForm.get('city')?.invalid 
    && employeeForm.get('city')?.touched"
[class.is-valid]="employeeForm.get('city')?.valid 
    && employeeForm.get('city')?.touched"

Kicsit több az input elemből: 

  <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>