Angular 1 and Angular 2 Integration

Angular2 forms | Angular2 forms validation | Angular2 email Validator

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 Live demo link:  http://embed.plnkr.co/bqPtI7oT8KH5gwUObnG6/preview]

The Examples,

//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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book