トッカンソフトウェア

Angular シグナルフォーム

サンプルソース

src\app\app.ts

import { Component, signal, computed } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';

interface LoginData {
  email: string;
  password: string;
}

@Component({
  selector: 'app-root',
  imports: [FormField],
  template:
    `
<form (submit)="onSubmit($event)">
  <label>
    Email:
    <input type="email" [formField]="loginForm.email" />
  </label>
  <label>
    Password:
    <input type="password" [formField]="loginForm.password" />
  </label>

  <button type="submit" [disabled]="this.notInput()">Log In</button>
  <button type="button" (click)="onClick()">Clear</button>

  @if(loginForm.email().value().length == 0){
    <div>Emailを入力して下さい。</div>
  }@else if(loginForm.password().value().length == 0){
    <div>パスワードを入力して下さい。</div>
  }

</form>
    `
})
export class App {

  loginModel = signal<LoginData>({
    email: '',
    password: '',
  });

  loginForm = form(this.loginModel);

  notInput = computed(() =>
    this.loginModel().email.length == 0
    || this.loginModel().password.length == 0
  );

  onSubmit(event: Event) {
    event.preventDefault();

    const credentials = this.loginModel();

    console.log(credentials);
    alert(JSON.stringify(credentials));
  }

  onClick() {
    this.loginModel.set({
      email: '',
      password: '',
    });
    // 個別にセット
    // this.loginForm.email().value.set('');
  }
}

				
ng serve --open