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!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2