Formlara Giriş

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-temel-form',
standalone: true,
imports: [FormsModule],
template: ` <h2>Temel Form</h2>
<form (ngSubmit)="gonder()"> <label>İsim:</label>
<input type="text" [(ngModel)]="kullanici.isim" name="isim" required>

<label>Email:</label>
<input type="email" [(ngModel)]="kullanici.email" name="email" required>

<button type="submit">Gönder</button>
</form>
<p *ngIf="gonderildi">Gönderilen Veri: {{ kullanici | json }}</p>

`
})
export class TemelFormComponent {
kullanici = { isim: '', email: '' };
gonderildi = false;

gonder() {
this.gonderildi = true;
}
}

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
selector: 'app-pratik-form',
standalone: true,
imports: [ReactiveFormsModule],
template: ` <h2>Reactive Form Örneği</h2>
<form [formGroup]="form" (ngSubmit)="gonder()"> <label>Kullanıcı Adı:</label> <input type="text" formControlName="kullaniciAdi">
<div *ngIf="form.get('kullaniciAdi')?.invalid && form.get('kullaniciAdi')?.touched">
Kullanıcı adı zorunludur. </div>

<label>Şifre:</label>
<input type="password" formControlName="sifre">
<div *ngIf="form.get('sifre')?.invalid && form.get('sifre')?.touched">
Şifre en az 6 karakter olmalıdır.
</div>

<button type="submit" [disabled]="form.invalid">Kaydet</button>
</form>
<p *ngIf="gonderildi">Form Verisi: {{ form.value | json }}</p>

`
})
export class PratikFormComponent {
form = new FormGroup({
kullaniciAdi: new FormControl('', Validators.required),
sifre: new FormControl('', [Validators.required, Validators.minLength(6)])
});

gonderildi = false;

gonder() {
this.gonderildi = true;
}
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
selector: 'app-ileri-form',
template: ` <h2>İleri Düzey Form</h2>
<form [formGroup]="profilForm" (ngSubmit)="gonder()"> <label>Ad Soyad:</label> <input formControlName="adSoyad">

<label>Yaş:</label>
<input type="number" formControlName="yas">

<label>Email:</label>
<input type="email" formControlName="email">

<button type="submit" [disabled]="profilForm.invalid">Kaydet</button>
</form>

`
})
export class IleriFormComponent implements OnInit, OnDestroy {
profilForm!: FormGroup;
sub!: Subscription;

constructor(private fb: FormBuilder) {}

ngOnInit() {
this.profilForm = this.fb.group({
adSoyad: ['', Validators.required],
yas: [null, [Validators.required, Validators.min(18)]],
email: ['', [Validators.required, Validators.email]]
});

this.sub = this.profilForm.valueChanges.subscribe(val => console.log('Değişiklik:', val));

}

gonder() {
if (this.profilForm.valid) {
console.log('Kaydedilen Veri:', this.profilForm.value);
}
}

ngOnDestroy() {
this.sub.unsubscribe();
}
}