Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_urlapok_ervenyessege_bootstrap [2025/09/27 11:45] – [Angular - Űrlapok érvényessége Bootstrap] admin
+++ oktatas:web:angular:angular_urlapok_ervenyessege_bootstrap [2025/09/27 16:09] (aktuális) – [Angular érvényesség - Bootstrap megjelenítés] admin
@@ Sor 11: / Sor 11: @@
 ===== Angular érvényesség Bootstrap mellett =====
-Ha Bootstrap érvényesség ellenőrzőjét szeretnénk használni a HTML elemek attribútumaival kell
+Az Angular-t a Bootstrap érvényesség ellenőrzésével szeretnénk használni.
-megadnunk mik a követelmények. A TypeScript oldali megkötéseket nem tudja figyelembe venni a
-a Bootstrap.
+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 =====
@@ Sor 125: / Sor 135: @@
 </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>