React-இன் useFormState ஹூக்கைப் பயன்படுத்தி படிவக் கையாளுதலை சீரமைத்து, செயல்திறனை மேம்படுத்தி, பயனர் அனுபவங்களை மெருகூட்டவும். வலுவான மற்றும் திறமையான படிவங்களை உருவாக்க சிறந்த நடைமுறைகள் மற்றும் மேம்பட்ட நுட்பங்களைக் கற்றுக்கொள்ளுங்கள்.
React useFormState: உகந்த பயனர் அனுபவங்களுக்கான படிவக் கையாளுதலில் தேர்ச்சி பெறுதல்
படிவங்கள் இணையப் பயன்பாடுகளின் ஒரு அடிப்படைக் கூறாகும், பயனர்கள் உங்கள் பயன்பாட்டுடன் தொடர்பு கொள்ளவும் தரவைச் சமர்ப்பிக்கவும் உதவுகின்றன. இருப்பினும், படிவ நிலையை நிர்வகித்தல், சரிபார்ப்பைக் கையாளுதல் மற்றும் கருத்துக்களை வழங்குதல் ஆகியவை சிக்கலானதாக மாறும், குறிப்பாக பெரிய மற்றும் மாறும் பயன்பாடுகளில். React 18-இல் அறிமுகப்படுத்தப்பட்ட React-இன் useFormState
ஹூக், படிவ நிலையை நிர்வகிக்கவும் படிவக் கையாளுதல் தர்க்கத்தை நெறிப்படுத்தவும் ஒரு சக்திவாய்ந்த மற்றும் திறமையான வழியை வழங்குகிறது, இது மேம்பட்ட செயல்திறனுக்கும் சிறந்த பயனர் அனுபவத்திற்கும் வழிவகுக்கிறது. இந்த விரிவான வழிகாட்டி useFormState
ஹூக்கை அதன் முக்கிய கருத்துக்கள், நன்மைகள், நடைமுறை எடுத்துக்காட்டுகள் மற்றும் மேம்பட்ட நுட்பங்களை உள்ளடக்கி ஆழமாக ஆராய்கிறது.
React useFormState என்றால் என்ன?
useFormState
என்பது ஒரு React ஹூக் ஆகும், இது நிலை மற்றும் புதுப்பிப்பு தர்க்கத்தை ஒரே ஹூக்கிற்குள் உள்ளடக்கி படிவ நிலை நிர்வாகத்தை எளிதாக்குகிறது. இது குறிப்பாக React Server Components மற்றும் Server Actions உடன் இணைந்து செயல்பட வடிவமைக்கப்பட்டுள்ளது, படிவச் செயலாக்கத்தை சர்வரில் இறக்குவதன் மூலம் படிப்படியான மேம்பாடு மற்றும் மேம்பட்ட செயல்திறனை செயல்படுத்துகிறது.
முக்கிய அம்சங்கள் மற்றும் நன்மைகள்:
- எளிமைப்படுத்தப்பட்ட நிலை மேலாண்மை: படிவ நிலை மற்றும் புதுப்பிப்பு தர்க்கத்தை மையப்படுத்துகிறது, பாய்லர்ப்ளேட் குறியீட்டைக் குறைத்து குறியீட்டின் வாசிப்புத்தன்மையை மேம்படுத்துகிறது.
- சர்வர் செயல்பாட்டு ஒருங்கிணைப்பு: React Server Actions உடன் தடையின்றி ஒருங்கிணைக்கிறது, இது சர்வரில் படிவ சமர்ப்பிப்புகள் மற்றும் சரிபார்ப்பைக் கையாள உங்களை அனுமதிக்கிறது.
- படிப்படியான மேம்பாடு: JavaScript முடக்கப்பட்டிருந்தாலும் படிவங்கள் செயல்பட அனுமதிப்பதன் மூலம் படிப்படியான மேம்பாட்டை செயல்படுத்துகிறது, JavaScript இயக்கப்பட்டிருக்கும்போது மேம்பட்ட செயல்பாடு வழங்கப்படுகிறது.
- உகந்த செயல்திறன்: சர்வரில் படிவ தர்க்கத்தைக் கையாள்வதன் மூலம் கிளையன்ட் பக்க செயலாக்கத்தைக் குறைக்கிறது, இதன் விளைவாக விரைவான படிவ சமர்ப்பிப்புகள் மற்றும் மேம்பட்ட பயன்பாட்டு செயல்திறன் ஏற்படுகிறது.
- அணுகல்தன்மை: பிழைகளைக் கையாள்வதற்கும் குறைபாடுகள் உள்ள பயனர்களுக்கு கருத்துக்களை வழங்குவதற்கும் வழிமுறைகளை வழங்குவதன் மூலம் அணுகக்கூடிய படிவங்களை உருவாக்குவதை எளிதாக்குகிறது.
useFormState ஹூக்கைப் புரிந்துகொள்ளுதல்
useFormState
ஹூக் இரண்டு வாதங்களை எடுக்கிறது:
- சர்வர் செயல்பாடு: படிவம் சமர்ப்பிக்கப்படும்போது செயல்படுத்தப்படும் ஒரு செயல்பாடு. இந்தச் செயல்பாடு பொதுவாக படிவ சரிபார்ப்பு, தரவு செயலாக்கம் மற்றும் தரவுத்தள புதுப்பிப்புகளைக் கையாளுகிறது.
- ஆரம்ப நிலை: படிவ நிலையின் ஆரம்ப மதிப்பு. இது ஒரு பொருள், வரிசை அல்லது பழமையான மதிப்பு போன்ற எந்த JavaScript மதிப்பாகவும் இருக்கலாம்.
இந்த ஹூக் இரண்டு மதிப்புகளைக் கொண்ட ஒரு வரிசையைத் தருகிறது:
- படிவ நிலை: படிவ நிலையின் தற்போதைய மதிப்பு.
- படிவ செயல்பாடு:
form
உறுப்பின்action
ப்ராப்பிற்கு நீங்கள் அனுப்பும் ஒரு செயல்பாடு. இந்தச் செயல்பாடு படிவம் சமர்ப்பிக்கப்படும்போது சர்வர் செயல்பாட்டைத் தூண்டுகிறது.
அடிப்படை எடுத்துக்காட்டு:
பயனர்கள் தங்கள் பெயர் மற்றும் மின்னஞ்சல் முகவரியைச் சமர்ப்பிக்க அனுமதிக்கும் ஒரு எளிய தொடர்புப் படிவத்தின் எடுத்துக்காட்டைக் கருத்தில் கொள்வோம்.
// சர்வர் செயல்பாடு (எடுத்துக்காட்டு - வேறு இடத்தில் வரையறுக்கப்பட வேண்டும்)
async function submitContactForm(prevState, formData) {
// படிவத் தரவைச் சரிபார்க்கவும்
const name = formData.get('name');
const email = formData.get('email');
if (!name || !email) {
return { message: 'தயவுசெய்து அனைத்து புலங்களையும் நிரப்பவும்.' };
}
// படிவத் தரவைச் செயலாக்கவும் (எ.கா., மின்னஞ்சல் அனுப்புதல்)
try {
// மின்னஞ்சல் அனுப்புவதை உருவகப்படுத்தவும்
await new Promise(resolve => setTimeout(resolve, 1000)); // ஒத்திசைவற்ற செயல்பாட்டை உருவகப்படுத்தவும்
return { message: 'உங்கள் சமர்ப்பிப்புக்கு நன்றி!' };
} catch (error) {
return { message: 'ஒரு பிழை ஏற்பட்டது. தயவுசெய்து பின்னர் மீண்டும் முயற்சிக்கவும்.' };
}
}
// React கூறு
'use client'; // சர்வர் செயல்பாடுகளுக்கு முக்கியமானது
import { useFormState } from 'react-dom';
function ContactForm() {
const [state, formAction] = useFormState(submitContactForm, { message: null });
return (
);
}
export default ContactForm;
இந்த எடுத்துக்காட்டில், submitContactForm
செயல்பாடு சர்வர் செயல்பாடாகும். இது முந்தைய நிலை மற்றும் படிவத் தரவை வாதங்களாகப் பெறுகிறது. இது படிவத் தரவைச் சரிபார்த்து, செல்லுபடியாகும் பட்சத்தில், தரவைச் செயலாக்கி, ஒரு வெற்றிச் செய்தியுடன் ஒரு புதிய நிலை பொருளைத் தருகிறது. பிழைகள் இருந்தால், அது ஒரு பிழைச் செய்தியுடன் ஒரு புதிய நிலை பொருளைத் தருகிறது. useFormState
ஹூக் படிவ நிலையை நிர்வகிக்கிறது மற்றும் formAction
செயல்பாட்டை வழங்குகிறது, இது form
உறுப்பின் action
ப்ராப்பிற்கு அனுப்பப்படுகிறது. படிவம் சமர்ப்பிக்கப்படும்போது, submitContactForm
செயல்பாடு சர்வரில் செயல்படுத்தப்படுகிறது, மேலும் இதன் விளைவாக வரும் நிலை கூறில் புதுப்பிக்கப்படுகிறது.
useFormState-இன் மேம்பட்ட நுட்பங்கள்
1. படிவ சரிபார்ப்பு:
தரவு ஒருமைப்பாட்டை உறுதி செய்வதற்கும் நல்ல பயனர் அனுபவத்தை வழங்குவதற்கும் படிவ சரிபார்ப்பு மிகவும் முக்கியமானது. useFormState
-ஐ சர்வரில் படிவ சரிபார்ப்பு தர்க்கத்தைக் கையாளப் பயன்படுத்தலாம். இதோ ஒரு எடுத்துக்காட்டு:
async function validateForm(prevState, formData) {
const name = formData.get('name');
const email = formData.get('email');
let errors = {};
if (!name) {
errors.name = 'பெயர் தேவை.';
}
if (!email) {
errors.email = 'மின்னஞ்சல் தேவை.';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
errors.email = 'தவறான மின்னஞ்சல் வடிவம்.';
}
if (Object.keys(errors).length > 0) {
return { errors: errors };
}
// படிவத் தரவைச் செயலாக்கவும் (எ.கா., தரவுத்தளத்தில் சேமிக்கவும்)
return { message: 'படிவம் வெற்றிகரமாக சமர்ப்பிக்கப்பட்டது!', errors: null };
}
function MyForm() {
const [state, action] = useFormState(validateForm, { message: null, errors: null });
return (
);
}
இந்த எடுத்துக்காட்டில், validateForm
சர்வர் செயல்பாடு படிவத் தரவைச் சரிபார்த்து, ஏதேனும் சரிபார்ப்புப் பிழைகளைக் கொண்ட ஒரு பொருளைத் தருகிறது. கூறு பின்னர் இந்தப் பிழைகளைப் பயனருக்குக் காட்டுகிறது.
2. முன்கூட்டிய மேம்படுத்தல்கள் (Optimistic Updates):
முன்கூட்டிய மேம்படுத்தல்கள், சர்வர் படிவ சமர்ப்பிப்பைச் செயலாக்குவதற்கு முன்பே உடனடி பின்னூட்டத்தை வழங்குவதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்த முடியும். useFormState
மற்றும் சிறிது கிளையன்ட் பக்க தர்க்கத்துடன், படிவம் சமர்ப்பிக்கப்பட்ட உடனேயே படிவ நிலையைப் புதுப்பித்து, பின்னர் சர்வர் பிழையைத் திருப்பினால் புதுப்பிப்பைத் திரும்பப் பெறுவதன் மூலம் முன்கூட்டிய மேம்படுத்தல்களைச் செயல்படுத்தலாம்.
'use client'
import { useFormState } from 'react-dom';
import { useState } from 'react';
async function submitForm(prevState, formData) {
await new Promise(resolve => setTimeout(resolve, 1000)); // நெட்வொர்க் தாமதத்தை உருவகப்படுத்தவும்
const value = formData.get('value');
if (value === 'error') {
return { message: 'சமர்ப்பிப்பு தோல்வியடைந்தது!' };
}
return { message: 'சமர்ப்பிப்பு வெற்றிகரமானது!' };
}
function OptimisticForm() {
const [optimisticValue, setOptimisticValue] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [state, action] = useFormState(submitForm, { message: '' });
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const value = formData.get('value');
setOptimisticValue(value);
setIsSubmitting(true);
await action(formData);
setIsSubmitting(false);
};
return (
);
}
இந்த எடுத்துக்காட்டில், தாமதமான சர்வர் பதிலை நாங்கள் உருவகப்படுத்துகிறோம். சர்வர் செயல்பாடு முடிவதற்குள், உள்ளீட்டு புலம் சமர்ப்பிக்கப்பட்ட மதிப்புடன் முன்கூட்டியே புதுப்பிக்கப்படுகிறது. சர்வர் செயல்பாடு தோல்வியுற்றால் (மதிப்பை 'error' என்று சமர்ப்பிப்பதன் மூலம் உருவகப்படுத்தப்படுகிறது), உள்ளீட்டு புலம் அதன் முந்தைய நிலைக்குத் திரும்பும்.
3. கோப்பு பதிவேற்றங்களைக் கையாளுதல்:
useFormState
கோப்பு பதிவேற்றங்களைக் கையாளவும் பயன்படுத்தப்படலாம். FormData
பொருள் தானாகவே கோப்புத் தரவைக் கையாளுகிறது. இதோ ஒரு எடுத்துக்காட்டு:
async function uploadFile(prevState, formData) {
const file = formData.get('file');
if (!file || file.size === 0) {
return { message: 'தயவுசெய்து ஒரு கோப்பைத் தேர்ந்தெடுக்கவும்.' };
}
// கோப்பை பதிவேற்றுவதை உருவகப்படுத்தவும்
await new Promise(resolve => setTimeout(resolve, 1000));
// நீங்கள் பொதுவாக கோப்பை இங்கே ஒரு சர்வருக்கு பதிவேற்றுவீர்கள்
console.log('கோப்பு பதிவேற்றப்பட்டது:', file.name);
return { message: `கோப்பு ${file.name} வெற்றிகரமாக பதிவேற்றப்பட்டது!` };
}
function FileUploadForm() {
const [state, action] = useFormState(uploadFile, { message: null });
return (
);
}
இந்த எடுத்துக்காட்டில், uploadFile
சர்வர் செயல்பாடு FormData
பொருளிலிருந்து கோப்பைப் பெற்று அதைச் செயலாக்குகிறது. ஒரு நிஜ உலகப் பயன்பாட்டில், நீங்கள் பொதுவாக கோப்பை Amazon S3 அல்லது Google Cloud Storage போன்ற கிளவுட் சேமிப்பக சேவைக்கு பதிவேற்றுவீர்கள்.
4. படிப்படியான மேம்பாடு:
useFormState
மற்றும் சர்வர் செயல்பாடுகளின் குறிப்பிடத்தக்க நன்மைகளில் ஒன்று படிப்படியான மேம்பாட்டை வழங்கும் திறன் ஆகும். இதன் பொருள் பயனரின் உலாவியில் JavaScript முடக்கப்பட்டிருந்தாலும் உங்கள் படிவங்கள் இன்னும் செயல்பட முடியும். படிவம் நேரடியாக சர்வருக்குச் சமர்ப்பிக்கப்படும், மேலும் சர்வர் செயல்பாடு படிவ சமர்ப்பிப்பைக் கையாளும். JavaScript இயக்கப்பட்டிருக்கும்போது, React படிவத்தை கிளையன்ட் பக்க ஊடாடுதல் மற்றும் சரிபார்ப்புடன் மேம்படுத்தும்.
படிப்படியான மேம்பாட்டை உறுதிப்படுத்த, உங்கள் சர்வர் செயல்பாடுகள் அனைத்து படிவ சரிபார்ப்பு மற்றும் தரவு செயலாக்க தர்க்கத்தையும் கையாளுகின்றன என்பதை உறுதிப்படுத்த வேண்டும். JavaScript இல்லாத பயனர்களுக்கும் நீங்கள் பின்னடைவு வழிமுறைகளை வழங்கலாம்.
5. அணுகல்தன்மை பரிசீலனைகள்:
படிவங்களைக் கட்டும்போது, குறைபாடுகள் உள்ள பயனர்கள் உங்கள் படிவங்களை திறம்பட பயன்படுத்த முடியும் என்பதை உறுதிப்படுத்த அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம். useFormState
பிழைகளைக் கையாள்வதற்கும் பயனர்களுக்குக் கருத்துக்களை வழங்குவதற்கும் வழிமுறைகளை வழங்குவதன் மூலம் அணுகக்கூடிய படிவங்களை உருவாக்க உதவும். இதோ சில அணுகல்தன்மை சிறந்த நடைமுறைகள்:
- சொற்பொருள் HTML-ஐப் பயன்படுத்தவும்: உங்கள் படிவங்களுக்கு அமைப்பு மற்றும் பொருளை வழங்க
<label>
,<input>
, மற்றும்<button>
போன்ற சொற்பொருள் HTML கூறுகளைப் பயன்படுத்தவும். - தெளிவான லேபிள்களை வழங்கவும்: அனைத்து படிவ புலங்களுக்கும் தெளிவான மற்றும் விளக்கமான லேபிள்கள் இருப்பதை உறுதிசெய்து, அவை
for
பண்பைப் பயன்படுத்தி தொடர்புடைய உள்ளீட்டு கூறுகளுடன் இணைக்கப்பட்டுள்ளன. - பிழைகளை நளினமாகக் கையாளவும்: சரிபார்ப்புப் பிழைகளைத் தெளிவான மற்றும் சுருக்கமான முறையில் காண்பிக்கவும், மேலும் பிழைகள் இருப்பதை ஸ்கிரீன் ரீடர்களைப் பயன்படுத்தும் பயனர்களுக்கு எச்சரிக்க ARIA பண்புகளைப் பயன்படுத்தவும்.
- விசைப்பலகை வழிசெலுத்தலை வழங்கவும்: பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி படிவத்தின் வழியாக செல்ல முடியும் என்பதை உறுதிப்படுத்தவும்.
- ARIA பண்புகளைப் பயன்படுத்தவும்: ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுக்கு கூடுதல் தகவல்களை வழங்க ARIA பண்புகளைப் பயன்படுத்தவும்.
useFormState-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
useFormState
ஹூக்கிலிருந்து அதிகப் பயனைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளவும்:
- சர்வர் செயல்பாடுகளை சிறியதாகவும் கவனம் செலுத்தியதாகவும் வைத்திருங்கள்: சர்வர் செயல்பாடுகள் படிவத் தரவைச் சரிபார்ப்பது அல்லது தரவுத்தளத்தைப் புதுப்பிப்பது போன்ற ஒரு ஒற்றைப் பணிக்கு பொறுப்பாக இருக்க வேண்டும். இது உங்கள் குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குகிறது.
- பிழைகளை நளினமாகக் கையாளவும்: எதிர்பாராத பிழைகளைத் தடுக்கவும் பயனருக்குத் தகவலறிந்த பிழைச் செய்திகளை வழங்கவும் உங்கள் சர்வர் செயல்பாடுகளில் வலுவான பிழை கையாளுதலைச் செயல்படுத்தவும்.
- ஒரு சரிபார்ப்பு நூலகத்தைப் பயன்படுத்தவும்: படிவ சரிபார்ப்பு தர்க்கத்தை எளிதாக்க Zod அல்லது Yup போன்ற சரிபார்ப்பு நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
- பயனருக்குத் தெளிவான பின்னூட்டத்தை வழங்கவும்: சரிபார்ப்புப் பிழைகள், வெற்றிச் செய்திகள் மற்றும் ஏற்றுதல் குறிகாட்டிகள் உட்பட, படிவ சமர்ப்பிப்பின் நிலை குறித்து பயனருக்குத் தெளிவான மற்றும் சரியான நேரத்தில் பின்னூட்டத்தை வழங்கவும்.
- செயல்திறனை மேம்படுத்தவும்: செயல்திறனை மேம்படுத்த கிளையன்ட் மற்றும் சர்வர் இடையே மாற்றப்படும் தரவின் அளவைக் குறைக்கவும்.
நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்
useFormState
பரந்த அளவிலான நிஜ உலகப் பயன்பாடுகளில் பயன்படுத்தப்படலாம். இதோ சில எடுத்துக்காட்டுகள்:
- இ-காமர்ஸ் செக்அவுட் படிவங்கள்: கட்டணத் தகவல், ஷிப்பிங் முகவரிகள் மற்றும் ஆர்டர் சுருக்கங்களைக் கையாளுதல்.
- பயனர் பதிவு மற்றும் உள்நுழைவு படிவங்கள்: பயனர்களை அங்கீகரித்தல் மற்றும் புதிய கணக்குகளை உருவாக்குதல்.
- தொடர்பு படிவங்கள்: பயனர் விசாரணைகள் மற்றும் பின்னூட்டங்களைச் சேகரித்தல்.
- தரவு உள்ளீட்டு படிவங்கள்: பல்வேறு பயன்பாடுகளில் தரவைப் பிடித்து நிர்வகித்தல்.
- கணக்கெடுப்புகள் மற்றும் வினாடி வினாக்கள்: பயனர் பதில்களைச் சேகரித்தல் மற்றும் பின்னூட்டங்களை வழங்குதல்.
எடுத்துக்காட்டாக, ஒரு இ-காமர்ஸ் செக்அவுட் படிவத்தைக் கருத்தில் கொள்ளுங்கள். useFormState
-ஐப் பயன்படுத்தி, ஷிப்பிங் முகவரிகள், கட்டணத் தகவல் மற்றும் பிற ஆர்டர் விவரங்களின் சரிபார்ப்பை சர்வரில் கையாளலாம். இது தரவுத்தளத்தில் சமர்ப்பிக்கப்படுவதற்கு முன்பு தரவு செல்லுபடியாகும் என்பதை உறுதிசெய்கிறது, மேலும் இது கிளையன்ட் பக்க செயலாக்கத்தைக் குறைப்பதன் மூலம் செயல்திறனையும் மேம்படுத்துகிறது.
மற்றொரு எடுத்துக்காட்டு பயனர் பதிவு படிவம். useFormState
-ஐப் பயன்படுத்தி, பயனர்பெயர்கள், கடவுச்சொற்கள் மற்றும் மின்னஞ்சல் முகவரிகளின் சரிபார்ப்பை சர்வரில் கையாளலாம். இது தரவு பாதுகாப்பாக இருப்பதையும் பயனர் சரியாக அங்கீகரிக்கப்படுவதையும் உறுதிசெய்கிறது.
முடிவுரை
React-இன் useFormState
ஹூக் படிவ நிலையை நிர்வகிக்கவும் படிவக் கையாளுதல் தர்க்கத்தை நெறிப்படுத்தவும் ஒரு சக்திவாய்ந்த மற்றும் திறமையான வழியை வழங்குகிறது. சர்வர் செயல்பாடுகள் மற்றும் படிப்படியான மேம்பாட்டைப் பயன்படுத்துவதன் மூலம், useFormState
உங்களை வலுவான, செயல்திறன் மிக்க மற்றும் அணுகக்கூடிய படிவங்களை உருவாக்க உதவுகிறது, இது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் படிவக் கையாளுதல் தர்க்கத்தை எளிதாக்கவும் சிறந்த React பயன்பாடுகளை உருவாக்கவும் useFormState
-ஐ திறம்பட பயன்படுத்தலாம். ஒரு மாறுபட்ட, சர்வதேச பார்வையாளர்களுக்காக படிவங்களை வடிவமைக்கும்போது உலகளாவிய அணுகல்தன்மை தரநிலைகள் மற்றும் பயனர் எதிர்பார்ப்புகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.