MWONGOZO WA UTANGAMANO · ANGULAR & SPA

Muunganisho wa Fomu ya Mawasiliano ya Angular (Inayojitegemea & Mawimbi)

Unganisha programu za Angular 17/18+ kwa Lugatu kwa kutumia Vipengee Vilivyojitegemea, Mawimbi tendaji, na HttpClient ili utume fomu ya mawasiliano inayotegemewa bila kutunza seva ya SMTP.

Unganisha Mradi wa Angular → Gundua Mwongozo wa React

1. Kipengele cha Fomu ya Mawasiliano Kinachojitegemea chenye Mawimbi Tekelezi

Angular ya Kisasa inapendelea Vipengee na Alama za Kujitegemea zaidi ya NgModule nzito. Utekelezaji huu unatoa fomu ya mawasiliano inayoweza kufikiwa yenye hali ya upakiaji tendaji, hitilafu, na mafanikio ikiwasilisha moja kwa moja kwa Lugatu.

contact-form.component.ts typescript

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <form (ngSubmit)="onSubmit()" class="space-y-4 max-w-md">
      <div>
        <label for="name" class="block text-sm font-semibold mb-1">Your Name</label>
        <input id="name" type="text" [(ngModel)]="name" name="name" required class="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label for="email" class="block text-sm font-semibold mb-1">Email Address</label>
        <input id="email" type="email" [(ngModel)]="email" name="email" required class="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label for="message" class="block text-sm font-semibold mb-1">Message</label>
        <textarea id="message" rows="4" [(ngModel)]="message" name="message" required class="w-full border rounded-xl p-2.5"></textarea>
      </div>

      <!-- Honeypot spam defense -->
      <input type="text" [(ngModel)]="gotcha" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

      <button type="submit" [disabled]="isSubmitting()" class="btn-primary-editorial py-2.5 px-6">
        {{ isSubmitting() ? 'Sending...' : 'Send Message' }}
      </button>

      <p *ngIf="isSuccess()" class="text-sm text-green-700 font-medium">Thank you! Your message has been received.</p>
      <p *ngIf="errorMessage()" class="text-sm text-red-600">{{ errorMessage() }}</p>
    </form>
  `,
})
export class ContactFormComponent {
  private http = inject(HttpClient);

  name = signal('');
  email = signal('');
  message = signal('');
  gotcha = signal('');

  isSubmitting = signal(false);
  isSuccess = signal(false);
  errorMessage = signal('');

  onSubmit() {
    if (this.gotcha()) return; // Silent discard for automated bot submissions

    this.isSubmitting.set(true);
    this.errorMessage.set('');

    const payload = {
      fields: {
        name: this.name(),
        email: this.email(),
        message: this.message(),
      },
      honeypot: this.gotcha(),
    };

    this.http.post('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', payload)
      .subscribe({
        next: () => {
          this.isSubmitting.set(false);
          this.isSuccess.set(true);
          this.name.set('');
          this.email.set('');
          this.message.set('');
        },
        error: () => {
          this.isSubmitting.set(false);
          this.errorMessage.set('Submission failed. Please try again.');
        },
      });
  }
}

2. Usambazaji wa SSR na Angular Universal Seva-hadi-Seva

Ikiwa programu yako ya Angular inaendeshwa na Angular SSR (injini ya Node / Express), unaweza kutuma maswali kupitia kidhibiti cha njia cha upande wa seva ili kulinda ufunguo wako wa API ya Seva hadi Seva ya Lugatu.

server.ts typescript

// Express / Node backend endpoint in Angular SSR
server.post('/api/contact', async (req, res) => {
  const { name, email, message, _gotcha } = req.body;
  if (_gotcha) return res.status(200).json({ ok: true });

  try {
    const response = await fetch(`https://www.lugatu.com/api/v1/forms/${process.env.LUGATU_FORM_ID}/submissions`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.LUGATU_API_KEY}`,
        'Content-Type': 'application/json',
        'Idempotency-Key': crypto.randomUUID(),
      },
      body: JSON.stringify({ fields: { name, email, message } }),
    });

    res.status(response.status).json({ ok: response.ok });
  } catch (error) {
    res.status(500).json({ error: 'Failed to deliver message' });
  }
});

3. Ulinzi wa Bot & Usanidi wa Honeypot

Lugatu hukagua sehemu ya _gotcha kiotomatiki. Ifanye isionekane kwa wageni wa kibinadamu kwa kutumia display:none na tabindex="-1". Spamboti zinazojaza kila pembejeo za DOM husababisha ukandamizaji wa kimya.

tip

Kamwe usitumie lebo za fomu kwa pembejeo za asali. Wacha kipengele cha kukamilisha kiotomatiki na usijumuishe sehemu kutoka kwa majina yanayoweza kufikiwa na kisoma skrini.

Tofauti ya Usalama na Uthibitishaji

Kipingamizi cha Usalama: Vifunguo vya API vya Seva hadi seva (lug_live_...) hazipaswi kamwe kuunganishwa katika vipengee vya Angular vya upande wa mteja au faili za mazingira.ts. Tumia mwisho wa umma kwa mawasilisho ya moja kwa moja ya mteja au usambaze kupitia ncha za seva.

Utatuzi na Hitilafu za Kawaida za Kumeza

HTTP 403 FORBIDDEN_BROWSER_ORIGIN wakati wa kuwasilisha kutoka Angular

Miisho ya fomu za umma huruhusu mawasilisho ya asili tofauti kutoka kwa kivinjari chochote. Ikiwa unapigia simu mwisho wa seva-kwa-seva (POST /api/v1/forms/{id}/submissions) moja kwa moja kutoka Angular, badilisha hadi mwisho wa umma (POST /api/v1/public/forms/{id}/submissions) au mbele kwa njia ya nyuma.

Maswali Yanayoulizwa Mara Kwa Mara

Je, Lugatu inaunga mkono Angular SSR na uongezaji maji kwa mteja?

Ndiyo. Uwasilishaji wa fomu za umma za Lugatu hufanywa kupitia uchotaji wa upande wa mteja au HttpClient baada ya mwingiliano wa mtumiaji, ambayo inaafikiana kabisa na Angular SSR na ugavishaji wa mteja.

Je, uko tayari kuunda mwisho wa fomu yako?

Anza bila malipo kwa sekunde chache. Hakuna kadi ya mkopo inahitajika.

Anza Bure →