// profile-form.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-profile-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="profileForm">
      <input formControlName="username" placeholder="Username" />
      <input formControlName="bio" placeholder="Bio" />

      <button type="button" (click)="fillDemo()">Fill demo data</button>
      <button type="button" (click)="profileForm.reset()">Reset</button>
    </form>
  `,
})
export class ProfileFormComponent implements OnInit {
  private fb = inject(FormBuilder);

  profileForm = this.fb.group({
    username: [''],
    bio: [''],
  });

  ngOnInit() {
    // Log the username live as the user types.
    this.profileForm.controls.username.valueChanges.subscribe((value) => {
      console.log('username changed to:', value);
    });
  }

  fillDemo() {
    this.profileForm.patchValue({ username: 'philip', bio: 'Learning Angular.' });
  }
}

/*
  Notes:
  - patchValue fills the listed fields without needing every field
    (unlike setValue, which requires all of them) — handy for demo
    data or loading a partial record.
  - reset() clears all controls back to their initial values.
  - valueChanges is an Observable that emits on every keystroke;
    subscribing to it is the essence of why these are called
    "reactive" forms. (Observables are covered fully in Chapter 11;
    a real app would also unsubscribe on destroy — see Chapter 12.)
*/