Bonjour les pionniers,
Dans cet article de blog, nous allons apprendre comment appliquer une validation personnalisée dans LWC au champ Email pour le rendre unique. Nous vérifierons si l’e-mail existe déjà dans la base de données ou non.
Critères d’acceptation: Dans un formulaire de création de compte, créez une validation personnalisée sur le champ Email afin que l’utilisateur ne doive pas saisir une valeur email en double. Lorsque l’e-mail en double est présent, affichez le message d’erreur.
Pour ce faire, nous avons créé ici un formulaire utilisant Formulaire de modification d’enregistrement Lightning dans notre composant Web Lightning (LWC). Le formulaire contient le Nom champ, champ Email (qui sera comme Adresse e-mail du contact principal sur l’assurance-chômage), et Soumettre bouton.
Lorsque l’utilisateur saisit l’adresse e-mail, celle-ci sera validée avec tous les enregistrements de l’organisation. Si un e-mail en double est trouvé, le message d’erreur sera généré.
Commençons…
Validation du courrier électronique à l’aide d’Apex : –
emailUniqueComponent.Controller
public with sharing class EmailUniquenessClass { @AuraEnabled(cacheable=true) public static String getEmail(Id recordId){ return [SELECT Email__c FROM Account WHERE Id=: recordId ].Email__c; } @AuraEnabled(cacheable=true) public static Boolean isEmailUnique(String email , Id recordId){ List<Account> accReq = [SELECT Id FROM Account WHERE Email__c =:email AND Id !=: recordId ]; return accReq.isEmpty(); } }
emailUniqueComponent.html
<template> <div class="slds-box box-config"> <lightning-card> <lightning-record-edit-form object-api-name={Account_Object} onsuccess= {handleSuccess} onerror={handleError}> <div class="slds-grid" > <div class="slds-size_2-of-2 slds-grid slds-wrap slds-form_horizontal slds-form" > <lightning-input-field field-name={Name} ></lightning-input-field> <lightning-input-field field-name={Email} type="email" value={email} onchange={handleEmailChange} ></lightning-input-field> </div> </div> <lightning-button type="submit" variant="brand" label="Save Request" class="slds-align_absolute-center"></lightning-button> </lightning-record-edit-form> </lightning-card> </div> </template>
emailUniqueComponent.js
import { LightningElement, wire, api } from 'lwc'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; import NAME_FIELD from '@salesforce/schema/Account.Name__c'; import EMAIL_FIELD from '@salesforce/schema/Account.Email__c'; import getEmail from '@salesforce/apex/EmailUniquenessClass.getEmail'; import isEmailUnique from '@salesforce/apex/EmailUniquenessClass.isEmailUnique'; export default class EmailUniqueComponent extends LightningElement { @api recordId; email; //Map imported fields to HTML side Account_Object = ACCOUNT_OBJECT; Name = NAME_FIELD; Email = EMAIL_FIELD; //Email Unique Check @wire(getEmail , {recordId: '$recordId'}) wiredEmail({error , data}){ if(data){ this.email = data; } else if(error){ console.log(error); } } handleEmailChange(event){ const newEmail = event.target.value; isEmailUnique({email: newEmail , recordId: this.recordId}) .then(result => { if(!result){ console.log('Email wala error =>' ,!result) const toastEvent = new ShowToastEvent({ title: 'Duplicate Email', message: 'The email value entered already exists. Please enter a unique email.' , varient: 'error' }); this.dispatchEvent(toastEvent); event.target.value = this.email; } }) .catch(error => { console.log(error); }); } }
emailUniqueComponent.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>58.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Pour valider le champ Email, nous avons d’abord créé le contrôleur contenant deux méthodes obtenirEmail et isEmailUnique. Ensuite, j’ai importé ces méthodes dans le JS et les ai utilisées dans la méthode wire et l’événement de gestionnaire pour valider l’adresse e-mail et envoyer un message d’erreur si un doublon était trouvé.
Résultat:
Lorsque l’utilisateur saisit les informations requises et l’adresse e-mail, le message «handleEmailChange » Le gestionnaire vérifiera automatiquement toutes les adresses e-mail présentes dans l’organisation/la base de données.
Si l’ID de courrier en double est présent, il affichera un message d’erreur avec le titre « E-mail en double » à l’aide de « ShowToastEvent ».
Vous pouvez voir le message d’erreur apparaître dans l’image ci-dessus lorsque l’ID de messagerie en double est présent.
De cette façon, nous pouvons valider l’adresse mail et la rendre unique.
Restez à l’écoute !!!
Les références:
- Composants Web Lightning dans Salesforce
- Système de conception Lightning
- JavaScript pour Salesforce LWC
Postes précédents:
Source link