• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Szerkesztve: 2025
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

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