Forms in AngularJs

If you have worked with Angular before then you might be aware that Angular offers two types of forms-reactive and template driven. But in AngularJs, it is just type of basic  form. Now, validations one the forms, are done on the client side  to ensure correct type of data is been put. So, here you will get an idea of AngularJs validations, and forms are all about basic html+validations!

Basic validations

All the basic HTML5 validations are valid in AngularJs.

So,the required condition , input type- which means if it is number then, it automatically displays error message of invalid input and same is for email.

ng-model is used for two way data binding. So, you can bind your object here.

And novalidate disable browser’s validation as the same HTML5 validations are applicable in browser, so browser need not have to validate again or cause any conflict!

<form novalidate>

<label>Name:</label>

<input type=”text” ng-model=”user.name” required/>

<input type=”button” value=”submit”>

</form>

<script>

user={name:”ABC”};

</script>

 

Most Frequently used AngularJs Validation Classes

ngvalid: If the state of model is valid that is if type is email, and valid email has been put.

nginvalid: If the state of model isnt valid.

ngdirty: Its is in a way to tell that the input controller has already been worked on and then applying validation.

ngtouched: Once the controller is been used.

nguntouched:Controller has not been used yet.

<form novalidate>

<label>Email:</label>

<input type=”email” class=”ng-invalid” ng-model=”user.email”>

</form novalidate>

css:

.ng-invalid

{

background-color:red;

}

Diagram

Hope, it would have made you clear with the  concept. If you still have an any doubt, leave it in the comment section below. Our team would revert back within 24 hours.

Do Follow our Facebook page https://www.facebook.com/lovebeingengineer/.

Similar Blogs:

Hope, it would have made you clear with the  concept. If you still have an any doubt, leave it in the comment section below. Our team would revert back within 24 hours.

Do Follow our Facebook page https://www.facebook.com/lovebeingengineer/.

Similar Blogs:

Templates And Expressions in AngularJs

 

Dependency Injection in AngularJs!

 

$scopes in AngularJs

 

Services in AngularJs

 

Controllers in AngularJs

Understanding Two-Way Data Binding in AngularJs

 

Journey of Angular

 

 

Dependency Injection in AngularJs!

 

$scopes in AngularJs

 

Services in AngularJs

 

Controllers in AngularJs

Understanding Two-Way Data Binding in AngularJs

 

Journey of Angular

 

 

 

Leave a Reply