// 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()">
      <div>
        <input name="name" #name="ngModel" [(ngModel)]="model.name" required placeholder="Name" />
        @if (name.invalid && name.touched) {
          <small>Name is required.</small>
        }
      </div>

      <div>
        <input name="email" #email="ngModel" [(ngModel)]="model.email" required email placeholder="Email" />
        @if (email.invalid && email.touched) {
          <small>A valid email is required.</small>
        }
      </div>

      <button type="submit" [disabled]="signupForm.invalid">Sign up</button>
    </form>
  `,
})
export class SignupComponent {
  model = { name: '', email: '' };

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

/*
  Notes:
  - Each input gets its own #ref="ngModel" (e.g. #email="ngModel")
    capturing that single control's state.
  - The message only shows when the control is both invalid AND
    touched — so an untouched empty form doesn't show errors
    immediately, only after the user has focused and left the field.
*/