Nurga e-posti kinnitamine materjalide kiipidega

Meilisisestuse täiustamine nurgeliste materjalide kiipide abil

Frontendi juurutamine Angulari ja TypeScripti abil

import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
const REGEXP_EMAIL = /^(([^<>()[\\].,;:\\s@"]+(\\.[^<>()[\\].,;:\\s@"]+)*)|(".+"))@(([^<>()[\\].,;:\\s@"]+\\.)+[^<>()[\\].,;:\\s@"]{2,})$/i;
export function emailsArrayValidator(control: FormControl) {
  const emails: string[] = Array.isArray(control.value) ? control.value : [];
  const invalidEmails = emails.filter(email => !REGEXP_EMAIL.test(email.trim()));
  return invalidEmails.length === 0 ? null : { invalidEmails: true };
}
@Component({
  selector: 'app-invite-form',
  templateUrl: './invite-form.component.html',
})
export class InviteFormComponent {
  inviteForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.pattern(REGEXP_EMAIL)]],
    friends: [[], [Validators.required, Validators.minLength(1), emailsArrayValidator]],
  });
  constructor(private fb: FormBuilder) {}
  addFriend(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      const friends = [...this.inviteForm.value.friends, value.trim()];
      this.inviteForm.controls['friends'].setValue(friends);
      if (input) {
        input.value = '';
      }
    }
  }
  removeFriend(friend: string): void {
    const friends = this.inviteForm.value.friends.filter((f: string) => f !== friend);
    this.inviteForm.controls['friends'].setValue(friends);
  }
}

Nurgamaterjali kiipide serveripoolne meilikontroll

Taustaprogrammi juurutamine Node.js'i ja Expressi abil

const express = require('express');
const router = express.Router();
const { body, validationResult } = require('express-validator');
router.post('/validate-emails', [
  body('emails').isArray(),
  body('emails.*').isEmail()],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }
    res.send('Emails are valid');
});
const app = express();
app.use(express.json());
app.use('/api', router);
app.listen(3000, () => console.log('Server running on port 3000'));

E-posti kinnitamine nurgas: tavalised päringud

1. Kuidas valideerida e-kirja Angular Material Chips abil?
2. Kasuta Validators.pattern regulaaravaldisega, et enne kiibina lisamist e-kiri vastaks õigele vormingule.
3. Kas Angular Material Chips saab hakkama mitme meiliga?
4. Jah, kiipe saab konfigureerida vastu võtma mitut meili, millest igaüks on vormiväljal eraldi kiibina.
5. Mis roll on FormControl kiipide haldamisel?
6. FormControl jälgib üksiku kiibi väärtust ja valideerimise olekut, hõlbustades integreerimist Angular vormidega.
7. Kuidas saab kuvada veateateid kehtetute meilidega?
8. Veateateid kuvatakse dünaamiliselt kasutades mat-error silt, mis reageerib vormi juhtelemendi valideerimisolekule.
9. Kas Angular Material Chips välimust on võimalik kohandada?
10. Jah, Angular Material võimaldab laialdasi stiili- ja teemavalikuid, et kohandada kiipe vastavalt teie rakenduse disaininõuetele.

Viimane ülevaade Angulari kasutamisest täiustatud e-posti sisendi haldamiseks

Angular Material Chips pakub praktilist ja visuaalselt atraktiivset lahendust vormis mitme meilisisestuse haldamiseks. Integreerides need kiibid Angulari võimsate vormihaldus- ja valideerimisfunktsioonidega, saavad arendajad pakkuda selget ja vigadeta kasutuskogemust. See seadistus ei aita mitte ainult vähendada kasutajate sisestusvigu, vaid ka neid vigu intuitiivsel viisil esitada, parandades seega meilisisestuse haldust nõudvate veebirakenduste üldist kasutatavust.