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. Import the submit function

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

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

2. Add the onSubmit method

   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. Bind the submit handler to the form

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

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

4. Disable the button when form is invalid

   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!