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

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
      <div>
        <input formControlName="name" placeholder="Name" />
        @if (name.invalid && name.touched) {
          <small>Name is required.</small>
        }
      </div>

      <div>
        <input formControlName="email" placeholder="Email" />
        @if (email.invalid && email.touched) {
          @if (email.errors?.['required']) {
            <small>Email is required.</small>
          } @else if (email.errors?.['email']) {
            <small>Enter a valid email.</small>
          }
        }
      </div>

      <button type="submit" [disabled]="signupForm.invalid">Sign up</button>
    </form>
  `,
})
export class SignupComponent {
  private fb = inject(FormBuilder);

  signupForm = this.fb.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]],
  });

  // Getters keep the template tidy when reading individual controls.
  get name() {
    return this.signupForm.controls.name;
  }
  get email() {
    return this.signupForm.controls.email;
  }

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

/*
  Notes:
  - fb.group({...}) builds the identical FormGroup as Challenge 1 but
    with terser [initialValue, validators] arrays per field.
  - The name/email getters expose each control to the template so
    @if can read .invalid/.touched/.errors without long paths like
    signupForm.controls.email.errors everywhere.
*/