import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-signup-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #signupForm="ngForm" (ngSubmit)="onSubmit(signupForm)">
      <label>
        Email
        <input
          name="email"
          type="email"
          required
          email
          ngModel
          #emailField="ngModel"
        />
      </label>
      @if (emailField.invalid && emailField.touched) {
        <p class="error">Please enter a valid email address.</p>
      }

      <label>
        Password
        <input name="password" type="password" required minlength="8" ngModel />
      </label>

      <button type="submit" [disabled]="signupForm.invalid">Sign up</button>
    </form>
  `
})
export class SignupFormComponent {
  onSubmit(form: NgForm): void {
    if (form.valid) {
      console.log('Submitted value:', form.value);
    }
  }
}

bootstrapApplication(SignupFormComponent).catch((err) => console.error(err));