{"id":2730,"date":"2018-10-22T21:37:00","date_gmt":"2018-10-22T16:07:00","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=2730"},"modified":"2018-10-22T21:39:52","modified_gmt":"2018-10-22T16:09:52","slug":"how-to-create-a-signup-form-and-edit-the-details-using-angular2","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-create-a-signup-form-and-edit-the-details-using-angular2\/","title":{"rendered":"How to create a Signup form and edit the details using Angular2"},"content":{"rendered":"<p><strong>How to create a signup form and edit the details using Angular2<\/strong><\/p>\n<p><strong>Dated : 18\/10\/2018<\/strong><\/p>\n<p>In this blog we are going to see how to create a signup form and edit the details of the user using Angular2.<\/p>\n<p><strong>Pre-requites:\u00a0<\/strong>To do this you have to install the Angular 2 in your machine if you doesn&#8217;t have the angular 2 in you machine you can install this using our previous post.<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"6m4iqOtktQ\"><p><a href=\"https:\/\/pheonixsolutions.com\/blog\/angular-2-installation\/\">Angular 2 installation<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Angular 2 installation&#8221; &#8212; PHEONIXSOLUTIONS\" src=\"https:\/\/pheonixsolutions.com\/blog\/angular-2-installation\/embed\/#?secret=Wb2tD8ucn6#?secret=6m4iqOtktQ\" data-secret=\"6m4iqOtktQ\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Step 1:<\/strong> Create a new Angular 2 project.(This will probably take a few minutes belongs to the system performance)<\/p>\n<p><span class=\"enlighterEnlighterJS EnlighterJS\"><span class=\"\"><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">ng new project_name<\/code><\/span><\/span><\/p>\n<p><strong>Step 2:<\/strong> There is a default app component will be created while creating the project if you want to create another new component with different name you can use<\/p>\n<p><strong><span class=\"enlighterEnlighterJS EnlighterJS\"><span class=\"br0\"><code class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">ng generate component [component-name]<br \/>\n<\/code><\/span><\/span><\/strong><\/p>\n<p><strong>Step 3:<\/strong> To create the signup form using angular2 add the below html code in <strong>app.component.html<\/strong><\/p>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"text-align: center;\">\n<h1>Welcome to website!<\/h1>\n<p>&lt;h2&gt;Please enter your details: &lt;\/h2&gt; Name:&lt;input type=&#8221;text&#8221; name=&#8221;Name&#8221; id=&#8221;Name&#8221;&gt; &lt;br&gt;&lt;br&gt; Gender:&lt;input type=&#8221;text&#8221; name=&#8221;Gender&#8221; id =&#8221;Gender&#8221;&gt;&lt;br&gt;&lt;br&gt; Mail:&lt;input type=&#8221;text&#8221; name=&#8221;Mail&#8221; id=&#8221;Mail&#8221;&gt;&lt;br&gt;&lt;br&gt; Qualification: &lt;input type=&#8221;text&#8221; name=&#8221;Qualification&#8221; id=&#8221;Qualification&#8221;&gt;&lt;br&gt;&lt;br&gt; Hobbies:&lt;input type=&#8221;text&#8221; name=&#8221;Hobbies&#8221; id=&#8221;Hobbies&#8221;&gt;&lt;br&gt;&lt;br&gt; Phone No:&lt;input type=&#8221;text&#8221; name=&#8221;Phone&#8221; id=&#8221;Phone&#8221;&gt;&lt;br&gt;&lt;br&gt; &lt;button type=&#8221;button&#8221; name=&#8221;submit&#8221; (click)=&#8221;clickAlert()&#8221;&gt;submit&lt;\/button&gt;<\/p>\n<\/div>\n<p><strong>Step 4:<\/strong> Add the below code in <strong>app.component.ts<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">import { Component } from '@angular\/core';\r\nimport { Http, Headers, RequestOptions,HttpModule } from '@angular\/http';\r\nimport { ActivatedRoute } from '@angular\/router';\r\nimport {HttpClientModule} from '@angular\/common\/http';\r\n\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent \r\n{\r\n  \r\n  constructor (private http:Http) { }\r\n  title = 'app';\r\n  clickAlert() \r\n{\r\n    \/\/alert(\"Data Saved Successfully\");\r\n    var headers = new Headers();\r\n  headers.append('Content-Type', 'application\/x-www-form-urlencoded');\r\n  \r\n  var data = document.getElementById(\"Name\");\r\n  console.log(data.value);\r\n  var data1 = document.getElementById(\"Gender\");\r\n  console.log(data1.value);\r\n  var data2 = document.getElementById(\"Mail\");\r\n  console.log(data2.value);\r\n  var data3 = document.getElementById(\"Qualification\");\r\n  console.log(data3.value);\r\n  var data4 = document.getElementById(\"Hobbies\");\r\n  console.log(data4.value);\r\n  var data5 = document.getElementById(\"Phone\");\r\n  console.log(data5.value);\r\n  \/*let datas = {'Name': 'data.value',  \r\n  @'Gender' 'data1.value', '&amp;Mail='+data2.value, '&amp;Qualification='+data3.value, '&amp;Hobbies='+data4.value, '&amp;Phone='+data5.value\r\n  };*\/\r\n   var headers = new Headers();\r\n    headers.append('Content-Type', 'application\/x-www-form-urlencoded; charset=UTF-8');\r\n     \r\n     var params = 'Name='+data.value+'&amp;Gender='+data1.value+'&amp;Mail='+data2.value, '&amp;Qualification='+data3.value, '&amp;Hobbies='+data4.value, '&amp;Phone='+data5.value;\r\n    this.http.post('http:\/\/localhost\/connectphp.php', params , {headers: headers})\r\n      .subscribe(\r\n        data =&gt; console.log('Received:' + data),\r\n        err =&gt; console.log(err),\r\n        () =&gt; console.log('Call Complete')\r\n      );\r\n\r\n   \t}\r\n}\r\n<\/pre>\n<p>Before adding this code don&#8217;t forgot to create the database in mysql here we are using mysql database.<\/p>\n<p style=\"text-align: left;\"><strong>Step 5:<\/strong> To connect the values with the mysql database we can pass the values through the php connection. Below we have attached the code of php connection for the database. Here we gave the php file name as <strong>connectphp.php<\/strong>. If you want any other name just change the file name and the below source code on this php file.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;?php\r\nprint_r($_POST);\r\n$Name = $_POST['Name'];\r\n$Gender = $_POST['Gender'];\r\n$Mail = $_POST['Mail'];\r\n$Qualification = $_POST['Qualification'];\r\n$Hobbies = $_POST['Hobbies'];\r\n$Phone = $_POST['Phone'];\r\n\r\n?&gt;\r\n\r\n&lt;?php\r\n$servername = \"localhost\";\r\n$dbname = \"testing\";\r\n$username = \"rakesh\";\r\n$password = \"\";\r\n\r\n\/\/ Create connection\r\n$conn = mysqli_connect($servername, $username, $password, $dbname);\r\n\/\/ Check connection\r\nif (!$conn) {\r\n    die(\"Connection failed: \" . mysqli_connect_error());\r\n}\r\n\r\necho $sql = \"INSERT INTO model (name,gender,gmail,qualification,hobbies,phoneno)\r\nVALUES ('$Name','$Gender','$Mail','$Qualification','$Hobbies','$Phone' )\";\r\n\r\nif (mysqli_query($conn, $sql)) {\r\n    echo \"New record created successfully\";\r\n} else {\r\n    echo \"Error: \" . $sql . \"&lt;br&gt;\" . mysqli_error($conn);\r\n}\r\n\r\nmysqli_close($conn);\r\n?&gt;\r\n\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong><span class=\"enlighterEnlighterJS EnlighterJS\"><span class=\"br0\">\u00a0<\/span><\/span><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create a signup form and edit the details using Angular2 Dated : 18\/10\/2018 In this blog we are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[453,452],"class_list":["post-2730","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-angular-signup","tag-signup-form-angular","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-I2","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2730"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2730\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}