Forms in Angular - Learning Angular (Part 7) — Transcript

Full transcript

1. 0:02hey friends welcome back so glad that
2. 0:04you could join us to continue learning
3. 0:06angular in the module on services and
4. 0:09dependency injection we updated The
5. 0:12Details page to have a button that read
6. 0:14applied now okay so that's great but we
7. 0:18didn't include any functionality that
8. 0:20would allow user to actually apply for a
9. 0:23housing location so in this session
10. 0:26we'll change that we're going to add an
11. 0:29application form and provide users of
12. 0:31scaffolding to apply for a housing
13. 0:34location so how do we make that happen
14. 0:37well we'll use angular forms forms allow
15. 0:41users to input data into a web
16. 0:43application forms have controls such as
17. 0:46buttons check boxes and input fields
18. 0:49in angular we can write data models that
19. 0:52represent these form controls and give
20. 0:54us access to the values in a smooth
21. 0:56programmatic way we can take advantage
22. 0:59of input validation as well validation
23. 1:02allows us to catch bad or malformed data
24. 1:05in our application
25. 1:06so let's start by building the form
26. 1:09model that represents the data that we
27. 1:11want to collect in the form so that's
28. 1:14user first name user last name and email
29. 1:19address
30. 1:20and
31. 1:21details.component.ts we need to import
32. 1:23some classes that help us work with
33. 1:26forms import form control form group
34. 1:30reactive forms module from at angular 4
35. 1:34slash forms the reactive forms module
36. 1:37will give us access to some template
37. 1:39features for forms so let's update the
38. 1:42component decorator metadata Imports
39. 1:44property value add another entry to the
40. 1:47array for reactive forms module okay
41. 1:50great
42. 1:51we've configured our component to use
43. 1:53forms the next step is to Define that
44. 1:55form model that I mentioned let's do
45. 1:58that now
46. 1:59add a property to the details component
47. 2:01class called apply form camel case and
48. 2:05set the value equal to a new instance of
49. 2:08form group a form group represents a
50. 2:11collection of form controls that make up
51. 2:14a form in our case we have three data
52. 2:17points that will represent as form
53. 2:19controls first name last name and email
54. 2:23the form group instance accepts an
55. 2:25object literal defining the controls for
56. 2:28the group
57. 2:29update the code to pass in an object
58. 2:31literal with the following property name
59. 2:33and values property name first name
60. 2:36value new instance of form control
61. 2:40now the form control accepts a default
62. 2:43value we'll set the default value as an
63. 2:46empty string
64. 2:47next property is last name value new
65. 2:52instance of form control with an empty
66. 2:54string as a parameter
67. 2:57then add a property for email use the
68. 3:00value new instance of form control with
69. 3:03empty string as a parameter okay
70. 3:06excellent we have a form group to
71. 3:08represent the data we want to collect
72. 3:10and we have access to it in our
73. 3:13component class when we bind this form
74. 3:15to the template we'll be able to keep
75. 3:18the values users enter into the form and
76. 3:21sync with the form group this is an
77. 3:24enormously valuable convenience that
78. 3:26angular provides for us the next step we
79. 3:29need to complete is connecting the apply
80. 3:32form form group instance to the template
81. 3:35and
82. 3:37details.component.ts will update the
83. 3:39template property of the component
84. 3:41decorative metadata
85. 3:43the section with the class listing Dash
86. 3:46Supply currently has two children
87. 3:48elements an H2 and a button delete the
88. 3:52button element and replace it with a
89. 3:55form element
90. 3:57add the form group attribute to the form
91. 3:59and bind it to apply form property
92. 4:03now don't forget to wrap the form group
93. 4:05attribute and square brackets to
94. 4:07activate binding next we'll add some
95. 4:10labels and inputs to our form add a
96. 4:13label element as a child to the form
97. 4:15element set the four attribute to equal
98. 4:18first Dash name and the text first name
99. 4:22as the content of the label element now
100. 4:25add a sibling input element set the ID
101. 4:28attribute to be first Dash name and the
102. 4:31type to be text
103. 4:33also include an attribute called form
104. 4:36control name camelcase and this is
105. 4:38important and set the value equal to
106. 4:41first name now let's repeat the same
107. 4:44process for last name and email
108. 4:47for the last name add a sibling label
109. 4:50element and set the four attribute to
110. 4:52the last Dash name value then add a
111. 4:55sibling input element and set the ID to
112. 4:58last stash name the types of text and
113. 5:01the form control name to be last name
114. 5:03and for email add a sibling label
115. 5:06element and set the four attributes to
116. 5:08email and add a sibling input element
117. 5:10set the ID to email the type to email
118. 5:13and set the form control name to email
119. 5:17finally we're ready to reintroduce our
120. 5:20button add a sibling element for the
121. 5:22button set the button type attribute
122. 5:24equal to submit
123. 5:26and the class to equal primary
124. 5:30save this code and check the browser all
125. 5:33right excellent we have our updated
126. 5:34Details page with the form bound to the
127. 5:37data you are doing so great high five
128. 5:40next let's configure the application to
129. 5:43take action when a user clicks the apply
130. 5:45button back in
131. 5:47details.component.ts we're going to
132. 5:49update the template property for this
133. 5:52component add the following attribute to
134. 5:55the form element
135. 5:57submit but wrap it in parentheses then
136. 6:00set the value equal to a function call
137. 6:03submit application
138. 6:05let's take a moment to clarify what's
139. 6:07going on here we've had property binding
140. 6:10with square brackets already but in this
141. 6:12case we're using a different type of
142. 6:15binding and that's event binding submit
143. 6:18is an event and when we want to bind to
144. 6:20events like click for example we use
145. 6:22parentheses as the syntax that signals
146. 6:25we're performing event binding right now
147. 6:28in the editor submit application will be
148. 6:30causing an error because the function is
149. 6:32not defined let's create that function
150. 6:34now in the body of details component
151. 6:36class add a function called submit
152. 6:39application it doesn't take any
153. 6:41parameters and it doesn't return
154. 6:43anything and the body of the function
155. 6:46we're going to make a call to a new
156. 6:48function in the housing service this dot
157. 6:52housing service
158. 6:53dot submit application now pass in this
159. 6:58dot
160. 7:00applyform.value.firstname double
161. 7:01question mark empty string this Dot
162. 7:06plyform.value.lastname double question
163. 7:08mark empty string and this dot
164. 7:12applyform.value.email double question
165. 7:13mark empty string okay two things to
166. 7:17note here before moving on first to
167. 7:21access the values from the form group
168. 7:23apply form we use the value property and
169. 7:26from there we can access the values of
170. 7:29the individual form controls
171. 7:31now what do those question marks even
172. 7:34mean those are the knowledge coalescing
173. 7:37operator if the value on the left hand
174. 7:40side is null or undefined then the value
175. 7:43on the right hand side is used okay back
176. 7:47to the implementation details we need to
177. 7:49create that function in the server so
178. 7:52let's take care of that now
179. 7:54and
180. 7:55housing.service.ts add a new function to
181. 7:58the housing service class called submit
182. 8:01application it accepts three parameters
183. 8:03of type string first name last name and
184. 8:07email
185. 8:08in the short term add a console.log to
186. 8:12the body of the function and print out
187. 8:14the values to the console in the future
188. 8:17we can do something much cooler all
189. 8:19right save this code and let's head over
190. 8:22to the browser now the application has
191. 8:25the form and the button submits that
192. 8:27form while passing the data to the
193. 8:29service now try clicking on the apply
194. 8:32button to confirm that the data is being
195. 8:34displayed in the browser console you
196. 8:37should be really proud of the work that
197. 8:39you've done so far this application has
198. 8:41grown significantly and we've included
199. 8:44many Core Concepts used to build
200. 8:46applications in angular
201. 8:49okay friends let's recap what we've
202. 8:51covered in this session together we've
203. 8:54learned about angular forms form groups
204. 8:57and form controls we've learned how to
205. 8:59bind a form group to an HTML form and
206. 9:02how to retrieve the data and pass it to
207. 9:04other parts of the application
208. 9:07finally we also learned how to use event
209. 9:10binding in angular as well again this is
210. 9:13really great work and right now with the
211. 9:16skills that you have you can get started
212. 9:18building web applications with angular
213. 9:20and technically you could stock right
214. 9:23here but
215. 9:24if you'd like to continue we have
216. 9:26another section where we'll add even
217. 9:28more cool features hope to catch you
218. 9:30there
219. 9:32foreign
220. 9:38[Music]