AngularJs input with types example

This example show how to use angularjs input with type is  text, checkbox, radio, date, datetime-local,time, email, month, number, url and week .

Input belong ng module of angularjs.

• input[text]

Standard HTML text input with angular data binding, inherited by most of the input elements.
More About definition of input[text] read at AngularJs doc.

How to use input[text]:

 <input type="text" name="txtusername" ng-model="username"  
       required ng-trim="true">  

• input[checkbox]

More About definition of input[checkbok] read at AngularJs doc.
How to use input[checkbok]:

 <input type="checkbox" ng-model="anwserQ"  
       ng-true-value="'YES'" ng-false-value="'NO'">  

• input[date]

More About definition of input[date] read at AngularJs doc.
How to use input[date]:

 input type="date" id="dateborn" name="studentdateborn" ng-model="date-born"  
     placeholder="yyyy-MM-dd" min="1990-01-01" max="2013-12-31" required />  

• input[datetime-local]

The text must be entered in a valid ISO-8601 local datetime format (yyyy-MM-ddTHH:mm:ss)

More about definition of input[datetime-local] read at AngularJs doc.
How to use input[datetime-local]:

 <input type="datetime-local" id="idInput" name="inputname" ng-model="localdatetime"  
    placeholder="yyyy-MM-ddTHH:mm:ss" min="1991-01-01T00:00:00" max="2013-12-31T00:00:00" required />  

• input[time]

The text must be entered in a valid ISO-8601 local time format (HH:mm:ss), for example: 14:57:00

More about definition of input[time] read at AngularJs doc.
How to use input[time]:

 <input type="time" id="inputtimeid" name="inputtime" ng-model="timevalue"  
     placeholder="HH:mm:ss" min="09:00:00" max="21:00:00" required />  

• input[email]

Text input with email validation
More About definition of input[email] read at AngularJs doc.
How to use input[email]:

   <input type="email" name="inputemail" ng-model="emailvalue" required>  

• input[month]

The text must be entered in a valid ISO-8601 month format (yyyy-MM), for example: 2015-10.
More About definition of input[month] read at AngularJs doc.
How to use input[month]:

 <input id="exampleInput" type="month" name="inputmonth" ng-model="monthvalue"  
    placeholder="yyyy-MM" min="2015-01" max="2015-12" required />  

• input[number]

Text input with number validation and transformation. Sets the number validation error if not a valid number..
More About definition of input[number] read at AngularJs doc.
How to use input[number]:

  <input type="number" name="inputDOM" ng-model="DOMValue"  
       min="1" max="31" required>  

• input[radio]

It is HTML radio button.
More about definition of input[radio] read at AngularJs doc.
How to use input[radio]:

  <input type="radio" ng-model="bluecolor" value="blue">  
  <input type="radio" ng-model="redcolor" value="red">  
  <input type="radio" ng-model="blackcolor" value="black">  

• input[url]

Text input with URL validation. Sets the url validation error key if the content is not a valid UR.
More about definition of input[url] read at AngularJs doc.
How to use input[url]:

  <input type="url" name="inputurl" ng-model="urlofrequest" required>  

• input[week ]

The text must be entered in a valid ISO-8601 week format (yyyy-W##), for example: 2013-W02.
More about definition of input[week ] read at AngularJs doc.
How to use input[week ]:

 <input id="inputweekid" type="week" name="inputweekname" ng-model="inputweekvalue"  
       placeholder="YYYY-W##" min="2014-W32"  
       max="2015-W52" required />  

Hope it help you know overview about using input via types in angularjs.

Thanks for your time reading.