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

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name" />
      <input formControlName="email" placeholder="Email" />
      <button type="submit" [disabled]="signupForm.invalid">Sign up</button>
    </form>
  `,
})
export class SignupComponent {
  signupForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
  });

  onSubmit() {
    console.log(this.signupForm.value);
  }
}

/*
  Notes:
  - The form lives entirely in the class as a FormGroup of FormControls;
    the template just attaches inputs to it via formControlName.
  - There is no [(ngModel)] anywhere — the FormGroup object is the
    single source of truth, and uses ReactiveFormsModule (not
    FormsModule).
  - signupForm.value returns a plain object { name, email } on submit.
*/