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_reaktiv_urlapok_csoportositassal [2025/03/02 16:53] – létrehozva admin
+++ oktatas:web:angular:angular_reaktiv_urlapok_csoportositassal [2025/09/26 20:48] (aktuális) – [Érvényesség ellenőrzése] admin
@@ Sor 144: / Sor 144: @@
 </code>
+===== Érvényesség ellenőrzése =====
+<code html>
+<form [formGroup]="employeeForm" (submit)="onSubmit()">
+  <div>
+    <label for="name">Name:</label>
+    <input id="name" formControlName="name" />
+  </div>
+  <div>
+    <label for="city">City:</label>
+    <input id="city" formControlName="city" />
+  </div>
+  <div>
+    <label for="salary">Salary:</label>
+    <input id="salary" formControlName="salary" />
+  </div>
+  <button type="submit"
+  [disabled]="employeeForm.invalid">
+  Submit
+  </button>
+</form>
+</code>
+<code javascript>
+import { Component } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
+@Component({
+  selector: 'app-employee',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './employee.component.html',
+  styleUrl: './employee.component.css'
+})
+export class EmployeeComponent {
+  employeeForm!: FormGroup;
+  constructor() {}
+  ngOnInit() {
+    this.employeeForm = new FormGroup({
+      name: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      city: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      salary: new FormControl(0, [Validators.required, Validators.pattern('^[0-9]+$')])
+    });
+  }
+  onSubmit() {
+    if (this.employeeForm.valid) {
+      console.log('Form Submitted!', {
+        name: this.employeeForm.value.name,
+        city: this.employeeForm.value.city,
+        salary: this.employeeForm.value.salary
+      });
+    } else {
+      console.log('Form is invalid');
+    }
+  }
+}
+</code>