The Input form is an important part of all the development. In AngularJs 1.x, we manage using the ng-model but it’s have some draw back.
In Angular 2, we think over this and trying to do better. The Angular 2 forms modules are easily to use and understand and its does not have any drawbacks.
In this article I am trying to show “how to use Angular 2 forms” in the common cases and the detail about it as given below.
Try the live example of the code shown in this page.
//The HTML code sample <div> <userformtemplate></userformtemplate> </div>
//The Angular 2 with ES5 code sample var appForm = function () { this.user = {}; }; var userFormTemplate = '<h1> Angular 2 User Form Template </h1> <br/> User Name: <input type="text" class="tb8"> <br> Confirm User Name <input type="text" class="tb8"> <br> <input type="button" value="Submit" class="testbutton">'; appForm.annotations = [ new angular.Component({ selector: 'userFormTemplate' }), new angular.View({ template: userFormTemplate })]; document.addEventListener("DOMContentLoaded", function () { angular.bootstrap(appForm); });
//The full live (HTML + Angular 2 with ES5) code sample <!doctype html> <html> <head> <title>angular 2 Form</title> <link href="style.css" rel="stylesheet" /> <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script> <script type="text/javascript"> var appForm = function () { this.user = {}; }; var userFormTemplate = '<h1> Angular 2 User Form Template </h1> <br/> User Name: <input type="text" class="tb8"> <br> Confirm User Name <input type="text" class="tb8"> <br> <input type="button" value="Submit" class="testbutton">'; appForm.annotations = [ new angular.Component({ selector: 'userFormTemplate' }), new angular.View({ template: userFormTemplate }) ]; document.addEventListener("DOMContentLoaded", function () { angular.bootstrap(appForm); }); </script> </head> <body> <userformtemplate></userformtemplate> </body> </html>
Try the live example of
the code shown in this page.
I hope you are enjoying with this post! Please share with
you friends. Thank you!!