One of the coolest features of AngularJS is client-side validation. There are so many form directives available in AngularJS. We will talk about some of them here, we will also explain custom validation. Using it you can create your own validations.
Initial requirement is reference,
<script src="~/Scripts/angular.js"></script>
Data type validation
a.In Html control use type field to specify the type of file.
b..$error.{your data type} will help you to disply the message.
<p>
<input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
<span style="color:red" ng- show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
<span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
<span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
</span>
</p>
Required filed validation
a. Put attribute as required in HTML control.
b..$error.required helps you to display the required field message.
<p>
<input type="text" name="Student" ng-model="Student" required>
<span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
<span ng-show="myForm.Student.$error.required">Student Name is required.</span>
</span>
</p>
Date Validation
a. Specify the type as date and
b. Format it will take as systems built-in format
c. .$error.date helps you to display the required field message.
<p>
Student Birth Date:<br>
<input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
<span style="color:red" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
<span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
<span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span>
</span>
</p>
Email Validation
a. Specify the type as Email and
b..$error.email helps you to display the required field message.
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
Range Validation Max and Min
a. Specify Max or Min attribute
b..$error.max or .$error.min helps you to display the error message.
<input type="number" name="marks" ng-model="marks" max="100" required>
<span style="color:red" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
<span ng-show="myForm.marks.$error.required">Email is required.</span>
<span ng-show="myForm.marks.$error.number">Invalid number.</span>
<span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
</span>
Initial requirement is reference,
<script src="~/Scripts/angular.js"></script>
Data type validation
a.In Html control use type field to specify the type of file.
b..$error.{your data type} will help you to disply the message.
<p>
<input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
<span style="color:red" ng- show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
<span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
<span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
</span>
</p>
Required filed validation
a. Put attribute as required in HTML control.
b..$error.required helps you to display the required field message.
<p>
<input type="text" name="Student" ng-model="Student" required>
<span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
<span ng-show="myForm.Student.$error.required">Student Name is required.</span>
</span>
</p>
Date Validation
a. Specify the type as date and
b. Format it will take as systems built-in format
c. .$error.date helps you to display the required field message.
<p>
Student Birth Date:<br>
<input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
<span style="color:red" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
<span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
<span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span>
</span>
</p>
Email Validation
a. Specify the type as Email and
b..$error.email helps you to display the required field message.
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
Range Validation Max and Min
a. Specify Max or Min attribute
b..$error.max or .$error.min helps you to display the error message.
<input type="number" name="marks" ng-model="marks" max="100" required>
<span style="color:red" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
<span ng-show="myForm.marks.$error.required">Email is required.</span>
<span ng-show="myForm.marks.$error.number">Invalid number.</span>
<span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
</span>
0 comments:
Post a Comment