Forms के साथ काम करना
In this page:
const form = document.querySelector("form") as HTMLFormElement;
form.addEventListener("submit", (e: SubmitEvent) => {
e.preventDefault();
});एक Typed Form बनाना
एक form element को HTMLFormElement typed करना आपको इसकी .elements collection और इसके submit/reset methods proper autocomplete के साथ access देता है, इसे एक generic, undifferentiated element के रूप में treat करने के बजाय।
उदाहरण: Creating a Typed Form
const form = document.createElement("form") as HTMLFormElement;
console.log(form.elements.length, typeof form.submit);Form Submission Handle करना
Form submission handle करने का मतलब है submit event सुनना और एक SubmitEvent receive करने के लिए typed एक handler के अंदर event.preventDefault() call करना, जो browser के default full-page reload को रोकता है।
उदाहरण: Handling Form Submission
const form = document.createElement("form");
form.addEventListener("submit", (event: SubmitEvent) => {
event.preventDefault();
console.log("Submission prevented");
});
form.dispatchEvent(new SubmitEvent("submit", { cancelable: true }));Input Values पढ़ना
Input values को सुरक्षित रूप से पढ़ने का मतलब है पहले event.target को HTMLInputElement में narrow करना, क्योंकि base event type में कोई .value property नहीं है — यह narrowing skip करना TypeScript form-handling errors का एक बहुत आम source है।
उदाहरण: Reading Input Values
const input = document.createElement("input");
input.value = "hello";
input.addEventListener("input", (event: Event) => {
const target = event.target as HTMLInputElement;
console.log(target.value);
});
input.dispatchEvent(new Event("input"));FormData
FormData API आपको एक submitted form से हर named field की value एक साथ collect करने देती है, और इसे सही से type करने का मतलब है यह जानना कि इसका .get() method FormDataEntryValue | null return करता है, एक bare string नहीं।
उदाहरण: FormData
const form = document.createElement("form");
form.innerHTML = '<input name="username" value="ravi">';
const data = new FormData(form);
const value: FormDataEntryValue | null = data.get("username");
console.log(value);Form Validation
TypeScript में Form validation आमतौर पर HTML के built-in constraint attributes (जैसे required) को submit पर चलने वाले typed custom logic के साथ combine करता है, क्योंकि compiler अकेले guarantee नहीं कर सकता कि user ने असल में एक field correctly भरी।
उदाहरण: Form Validation
const input = document.createElement("input");
input.required = true;
input.value = "";
function isValid(el: HTMLInputElement): boolean {
return !el.required || el.value.trim().length > 0;
}
console.log(isValid(input));- Submit handler में
event.preventDefault()भूल जाना, इसलिए page reload होता है। form.elements["name"].valueको बिना cast के पढ़ना, क्योंकि element को input होना known नहीं है।- यह मान लेना कि
FormData.get("age")एक number return करता है, जब यहFormDataEntryValue | null(एक string या file) return करता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: