37 | Angular Form Validation | Form Validation In Angular | Template Driven Form (TDF) (Hindi/Urdu)

एंगुलर फॉर्म वैलिडेशन में फॉर्म को वैलिडेट करना बहुत आसान होता है। यहाँ हम टेम्पलेट ड्राइवन फॉर्म (TDF) का उपयोग करके अंगुलर में फॉर्म वैलिडेशन के बारे में बात करेंगे।

अंगुलर में फॉर्म वैलिडेशन के लिए हमें कई बिल्ट-इन वैलिडेशन डायरेक्टिव्स मिलते हैं जैसे कि required, minlength, maxlength, pattern आदि।

उदाहरण के तौर पर, अगर हमें एक नाम फील्ड को वैलिडेट करना ह। हम आसानी से निम्नलिखित कोड का उपयोग कर सकते हैं।

		
			<form #myForm="ngForm">
			  <input type="text" name="name" ngModel required minlength="3" maxlength="15" pattern="[a-zA-Z ]*" />
			  <div *ngIf="myForm.controls.name.touched && myForm.controls.name.invalid">
			    <div *ngIf="myForm.controls.name.errors.required">
			      Name is required
			    </div>
			    <div *ngIf="myForm.controls.name.errors.minlength">
			      Name must be at least 3 characters
			    </div>
			    <div *ngIf="myForm.controls.name.errors.maxlength">
			      Name cannot be more than 15 characters
			    </div>
			    <div *ngIf="myForm.controls.name.errors.pattern">
			      Name must contain only letters
			    </div>
			  </div>
			</form>
		
	

इसे यहाँ ध्यान दें कि हमने नाम फील्ड को बहुत से वैलिडेशन डायरेक्टिव्स के साथ जोड़ा है। इसके बाद हमने नाम फील्ड के अंदर की वैल्यू को वैलीडेट किया है और अगर कोई वैल्यू इन वैलिडेशन के हिसाब से नहीं होती है तो उसे उसकी Dictive के हिसाब से दिखाया जाता है।

इसी प्रकार हमें अन्य फॉर्म इलिमेंट्स के लिए भी वैलिडेशन जोड़ सकते हैं और उनको वैलीडेट कर सकते हैं।