<form>
  <div>
    <label>
      Email
      <input type="email" [formField]="loginForm.email" />
    </label>
    @if (loginForm.email().invalid() && loginForm.email().touched()) {
      <div class="error">
        @for (error of loginForm.email().errors(); track error.kind) {
          <span>{{ error.message }}</span>
        }
      </div>
    }
  </div>

  <div>
    <label>
      Password
      <input type="password" [formField]="loginForm.password" />
    </label>
    @if (loginForm.password().invalid() && loginForm.password().touched()) {
      <div class="error">
        @for (error of loginForm.password().errors(); track error.kind) {
          <span>{{ error.message }}</span>
        }
      </div>
    }
  </div>

  <div>
    <label>
      <input type="checkbox" [formField]="loginForm.rememberMe" />
      Remember me
    </label>
  </div>

  <button type="submit">Log in</button>
</form>

<div class="form-debug">
  <h3>Current Form Values:</h3>
  <p>Email: {{ loginForm.email().value() }}</p>
  <p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
  <p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
</div>
