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

@Component({
  selector: 'app-create-account',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #form="ngForm" (ngSubmit)="onSubmit()">
      <div>
        <input
          name="username"
          #username="ngModel"
          [(ngModel)]="model.username"
          required
          minlength="3"
          placeholder="Username"
        />
        @if (username.invalid && username.touched) {
          @if (username.errors?.['required']) {
            <small>Username is required.</small>
          } @else if (username.errors?.['minlength']) {
            <small>Username must be at least 3 characters.</small>
          }
        }
      </div>

      <div>
        <input
          name="password"
          #password="ngModel"
          [(ngModel)]="model.password"
          required
          minlength="8"
          type="password"
          placeholder="Password"
        />
        @if (password.invalid && password.touched) {
          @if (password.errors?.['required']) {
            <small>Password is required.</small>
          } @else if (password.errors?.['minlength']) {
            <small>Password must be at least 8 characters.</small>
          }
        }
      </div>

      <button type="submit" [disabled]="form.invalid">Create account</button>
    </form>
  `,
})
export class CreateAccountComponent {
  model = { username: '', password: '' };

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

/*
  Notes:
  - control.errors is an object keyed by which validator failed —
    e.g. errors['required'] or errors['minlength'] — so checking each
    key shows the specific reason a field is invalid.
  - The optional chaining (errors?.['required']) guards against errors
    being null when the control is currently valid.
  - @if / @else if (Chapter 4) picks exactly one message, prioritizing
    "required" over "too short" when the field is empty.
*/