Form gönderimini ekleme

Son olarak, form gönderimini nasıl yöneteceğimizi öğrenelim. Form geçerli olduğunda asenkron işlemleri çalıştırmak için submit() fonksiyonunu kullanmayı ve formda hatalar olduğunda gönder düğmesini devre dışı bırakmayı öğreneceksiniz.

Bu aktivitede şunları öğreneceksiniz:

  • submit() fonksiyonunu içe aktarma
  • Bir gönderim işleyici metodu oluşturma
  • Yalnızca geçerli olduğunda mantık çalıştırmak için submit() kullanma
  • Form durumuna göre gönder düğmesini devre dışı bırakma

Formu tamamlayalım!

  1. submit fonksiyonunu içe aktarın

    @angular/forms/signals paketinden submit fonksiyonunu içe aktarın:

    import {form, FormField, required, email, submit} from '@angular/forms/signals';

  2. onSubmit metodunu ekleyin

    Bileşen sınıfınızda, form gönderimini yöneten bir onSubmit() metodu ekleyin:

    onSubmit(event: Event) {
  event.preventDefault();
  submit(this.loginForm, async () => {
    const credentials = this.loginModel();
    console.log('Logging in with:', credentials);
    // Add your login logic here
  });
}

    submit() fonksiyonu, asenkron geri çağrınızı yalnızca form geçerli olduğunda çalıştırır. Ayrıca formun gönderim durumunu otomatik olarak yönetir.

  3. Gönderim yöneticisini forma bağlayın

    Şablonunuzda, onSubmit() metodunu formun submit olayına bağlayın:

    <form (submit)="onSubmit($event)"></form>

  4. Form geçersizken düğmeyi devre dışı bırakın

    Form geçersiz olduğunda gönder düğmesini devre dışı bırakmak için güncelleyin:

    <button type="submit" [disabled]="loginForm().invalid()">Log in</button>

    Bu, formda doğrulama hataları olduğunda gönderimi engeller.

Tebrikler! Signal Forms ile eksiksiz bir giriş formu oluşturdunuz.

Öğrendiklerinizi gözden geçirmeye ve ileri düzey konuları keşfetmeye hazır mısınız? Sonraki adımlara devam edin!