// signup.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

  onSubmit() {
    console.log(this.model);
  }
}

/*
  Notes:
  - FormsModule is required for both [(ngModel)] and the ngForm
    directive that #signupForm="ngForm" captures.
  - (ngSubmit) already prevents the native page reload, so no
    preventDefault() is needed the way React required.
  - [disabled]="signupForm.invalid" keeps the button disabled until
    every field's validators (required, email) pass.
*/