title
Angular Reactive Forms Tutorial (Angular 4)

description
Prefer reading a tutorial? https://goo.gl/6RBuJD http://coursetro.com for more awesomeness. Source files: https://github.com/designcourse/reactive-forms-tutorial In this tutorial, we'll take a look at the most robust way to manage forms in Angular; Reactive Forms. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Angular Reactive Forms Tutorial (Angular 4)', 'heatmap': [{'end': 237.662, 'start': 190.881, 'weight': 0.906}, {'end': 272.023, 'start': 238.243, 'weight': 0.793}, {'end': 437.947, 'start': 420.901, 'weight': 0.863}, {'end': 530.025, 'start': 472.578, 'weight': 0.717}, {'end': 575.947, 'start': 541.058, 'weight': 0.753}, {'end': 665.304, 'start': 587.113, 'weight': 0.748}, {'end': 694.816, 'start': 674.588, 'weight': 0.714}, {'end': 761.927, 'start': 739.849, 'weight': 0.746}, {'end': 839.424, 'start': 799.899, 'weight': 0.887}, {'end': 864.369, 'start': 844.267, 'weight': 0.745}, {'end': 936.304, 'start': 901.713, 'weight': 0.762}, {'end': 989.135, 'start': 947.132, 'weight': 0.917}, {'end': 1103.547, 'start': 1079.495, 'weight': 0.759}, {'end': 1442.098, 'start': 1422.147, 'weight': 0.714}], 'summary': "Tutorial on angular reactive forms (angular 4) covers building a reactive form with validation for name, description, and checkbox, enabling easy form submission. it also includes starting an angular project with angular cli, handling form control creation and validation, importing the front-end framework 'foundation' for setting up a form or website layout, and styling the form with rule sets in styles.css and app.component.css for improved user experience, showcasing the advantages of reactive forms over template-driven forms.", 'chapters': [{'end': 88.023, 'segs': [{'end': 68.516, 'src': 'embed', 'start': 3.433, 'weight': 0, 'content': [{'end': 9.86, 'text': "Alright, so here's a real quick demonstration of the form that we're going to build all the way from the very beginning to the end.", 'start': 3.433, 'duration': 6.427}, {'end': 15.326, 'text': 'Okay, so as we can see, we cannot click on our submit form because nothing is valid yet.', 'start': 10.4, 'duration': 4.926}, {'end': 22.093, 'text': "So we have validation that's applied to both the name and also the description,", 'start': 15.486, 'duration': 6.607}, {'end': 27.256, 'text': 'so we can see how these anime in will be covering all that and we can see this field is currently required.', 'start': 22.093, 'duration': 5.163}, {'end': 31.879, 'text': 'so if i just hit f or any type of character, it will go away in this field.', 'start': 27.256, 'duration': 4.623}, {'end': 35.882, 'text': "here we have a description that's between needs to be between 30 and 500 characters.", 'start': 31.879, 'duration': 4.003}, {'end': 42.907, 'text': 'so you know, if i just paste this in real quickly it goes away and we can submit our form very easily.', 'start': 35.882, 'duration': 7.025}, {'end': 45.589, 'text': 'at this point you could save it to a database or do whatever you want.', 'start': 42.907, 'duration': 2.682}, {'end': 52.795, 'text': 'Now we also have something down here that really demonstrates the power of reactive forms, which is a minimum of three characters checkbox.', 'start': 46.269, 'duration': 6.526}, {'end': 63.195, 'text': 'So right now, if I simply click out of here and I just hit our little F key here, And if we turn on,', 'start': 53.276, 'duration': 9.919}, {'end': 68.516, 'text': "it's going to change the validation that's required for our name input.", 'start': 63.195, 'duration': 5.321}], 'summary': 'Demonstration of form building with validation for name, description, and checkbox, enabling easy form submission.', 'duration': 65.083, 'max_score': 3.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU3433.jpg'}], 'start': 3.433, 'title': 'Building reactive form with validation', 'summary': 'Demonstrates building a reactive form with validation for name, description, and checkbox, with name requiring minimum 3 characters, description between 30 and 500 characters, enabling easy form submission.', 'chapters': [{'end': 88.023, 'start': 3.433, 'title': 'Reactive form validation demo', 'summary': 'Demonstrates building a reactive form with validation for name, description, and checkbox, including the requirement for a name to be a minimum of three characters and a description between 30 and 500 characters, allowing for easy submission of the form.', 'duration': 84.59, 'highlights': ['The form demonstrates validation for name and description, with the name requiring a minimum of three characters and the description needing to be between 30 and 500 characters.', 'Reactive forms showcase the ability to dynamically change validation requirements based on user input, such as toggling a checkbox affecting the validation for the name input.', 'The demonstration includes the ease of submitting the form after satisfying the validation criteria, potentially enabling saving the form data to a database.']}], 'duration': 84.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU3433.jpg', 'highlights': ['Reactive forms showcase dynamic validation based on user input.', 'Demonstration includes ease of form submission after validation.', 'Form requires minimum 3 characters for name and 30-500 for description.']}, {'end': 564.597, 'segs': [{'end': 130.356, 'src': 'embed', 'start': 104.149, 'weight': 0, 'content': [{'end': 110.211, 'text': "Now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on.", 'start': 104.149, 'duration': 6.062}, {'end': 111.572, 'text': "All right, let's get back to it.", 'start': 110.532, 'duration': 1.04}, {'end': 118.945, 'text': "All right, so just so we're on the same page, we're going to use the Angular command line interface to start a new project.", 'start': 113.2, 'duration': 5.745}, {'end': 125.592, 'text': 'Now, if you need help with this process, such as installing and needing all the dependencies, such as NodeJS and NPM,', 'start': 119.026, 'duration': 6.566}, {'end': 130.356, 'text': "then check out the free Angular 4 from scratch course that's located at corsetro.com.", 'start': 125.592, 'duration': 4.764}], 'summary': 'Using angular cli to start a project, check free angular 4 course at corsetro.com', 'duration': 26.207, 'max_score': 104.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU104149.jpg'}, {'end': 200.567, 'src': 'embed', 'start': 170.327, 'weight': 1, 'content': [{'end': 175.749, 'text': "Okay, so what we're going to do is we're going to go to our code editor now and open up the project.", 'start': 170.327, 'duration': 5.422}, {'end': 185.998, 'text': 'And the first thing that we need to do before we construct any type of form is to import the reactive forms module into our app.module.ts file.', 'start': 176.892, 'duration': 9.106}, {'end': 190.061, 'text': "And that's located in our source app and right here.", 'start': 186.018, 'duration': 4.043}, {'end': 200.567, 'text': "Okay So what we want to do first is we're going to add the reactive forms module into this right here.", 'start': 190.881, 'duration': 9.686}], 'summary': 'Import reactive forms module into app.module.ts file.', 'duration': 30.24, 'max_score': 170.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU170327.jpg'}, {'end': 237.662, 'src': 'heatmap', 'start': 190.881, 'weight': 0.906, 'content': [{'end': 200.567, 'text': "Okay So what we want to do first is we're going to add the reactive forms module into this right here.", 'start': 190.881, 'duration': 9.686}, {'end': 204.45, 'text': 'And this is included in the angular forms library.', 'start': 201.648, 'duration': 2.802}, {'end': 212.263, 'text': "We'll copy that and then we're gonna add a comma just after HTTP module and add it as an import and we'll save it.", 'start': 205.66, 'duration': 6.603}, {'end': 213.904, 'text': 'Okay, great.', 'start': 213.304, 'duration': 0.6}, {'end': 222.969, 'text': 'So now, at this point, you could either choose to start going into your template and defining the HTML for your form, or you can go to your component.', 'start': 214.064, 'duration': 8.905}, {'end': 226.152, 'text': 'Really, it just depends on your own preferences.', 'start': 223.93, 'duration': 2.222}, {'end': 230.076, 'text': "So we're going to work within the component code first.", 'start': 226.853, 'duration': 3.223}, {'end': 237.662, 'text': 'So we have to first start by importing some necessary form specific functions in the component that will house the form.', 'start': 230.576, 'duration': 7.086}], 'summary': 'Adding the reactive forms module in angular, then importing form-specific functions into the component code.', 'duration': 46.781, 'max_score': 190.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU190881.jpg'}, {'end': 268.3, 'src': 'embed', 'start': 238.243, 'weight': 2, 'content': [{'end': 242.267, 'text': 'So that for us is going to be just this standard app component right here.', 'start': 238.243, 'duration': 4.024}, {'end': 248.551, 'text': "So we're going to import three different form classes from the Angular forms library.", 'start': 242.967, 'duration': 5.584}, {'end': 252.173, 'text': 'That is the form builder, our form group, and the validators.', 'start': 248.591, 'duration': 3.582}, {'end': 256.336, 'text': 'So each form that we have is going to be bound to an instance of form group.', 'start': 252.774, 'duration': 3.562}, {'end': 261.7, 'text': 'And then we use the form builder right here to handle form control creation.', 'start': 256.877, 'duration': 4.823}, {'end': 268.3, 'text': 'And within that, we use the validators to set up validation for each of our form inputs.', 'start': 262, 'duration': 6.3}], 'summary': 'Using angular forms, import form builder, form group, and validators to set up form controls and input validation.', 'duration': 30.057, 'max_score': 238.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU238243.jpg'}, {'end': 272.023, 'src': 'heatmap', 'start': 238.243, 'weight': 0.793, 'content': [{'end': 242.267, 'text': 'So that for us is going to be just this standard app component right here.', 'start': 238.243, 'duration': 4.024}, {'end': 248.551, 'text': "So we're going to import three different form classes from the Angular forms library.", 'start': 242.967, 'duration': 5.584}, {'end': 252.173, 'text': 'That is the form builder, our form group, and the validators.', 'start': 248.591, 'duration': 3.582}, {'end': 256.336, 'text': 'So each form that we have is going to be bound to an instance of form group.', 'start': 252.774, 'duration': 3.562}, {'end': 261.7, 'text': 'And then we use the form builder right here to handle form control creation.', 'start': 256.877, 'duration': 4.823}, {'end': 268.3, 'text': 'And within that, we use the validators to set up validation for each of our form inputs.', 'start': 262, 'duration': 6.3}, {'end': 272.023, 'text': "So you'll get a better understanding of how this works as we progress.", 'start': 268.76, 'duration': 3.263}], 'summary': 'Import 3 form classes from angular forms library and bind forms to form groups for control creation and validation.', 'duration': 33.78, 'max_score': 238.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU238243.jpg'}, {'end': 338.992, 'src': 'embed', 'start': 311.253, 'weight': 5, 'content': [{'end': 321.779, 'text': "we also have the description of type string bound to this empty, and also the name, and that's bound to nothing as well, and it's the string.", 'start': 311.253, 'duration': 10.526}, {'end': 322.86, 'text': 'so rform.', 'start': 321.779, 'duration': 1.081}, {'end': 325.322, 'text': 'again it just has a name and a description primarily.', 'start': 322.86, 'duration': 2.462}, {'end': 331.086, 'text': "So now within the constructor we're going to use dependency injection.", 'start': 325.982, 'duration': 5.104}, {'end': 337.13, 'text': 'This is going to be private form builder to form builder.', 'start': 332.187, 'duration': 4.943}, {'end': 338.992, 'text': 'All right.', 'start': 338.691, 'duration': 0.301}], 'summary': 'Using dependency injection with private form builder.', 'duration': 27.739, 'max_score': 311.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU311253.jpg'}, {'end': 441.109, 'src': 'heatmap', 'start': 407.498, 'weight': 4, 'content': [{'end': 414.599, 'text': "And let's say for instance, that we, this particular input, we want to have multiple validation requirements.", 'start': 407.498, 'duration': 7.101}, {'end': 420.901, 'text': 'So not only will it be required, but maybe when we want to have a minimum length and a maximum length,', 'start': 414.659, 'duration': 6.242}, {'end': 423.761, 'text': 'which is obviously a common validation requirement.', 'start': 420.901, 'duration': 2.86}, {'end': 429.002, 'text': 'So the way we do this is we use first validators.compose.', 'start': 424.241, 'duration': 4.761}, {'end': 437.947, 'text': 'So right before this validators.compose, And then we wrap it in a parentheses and a bracket.', 'start': 429.242, 'duration': 8.705}, {'end': 441.109, 'text': "So we'll close this out real quick.", 'start': 439.788, 'duration': 1.321}], 'summary': 'The input requires multiple validation requirements including minimum and maximum length.', 'duration': 33.611, 'max_score': 407.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU407498.jpg'}, {'end': 536.77, 'src': 'heatmap', 'start': 472.578, 'weight': 6, 'content': [{'end': 486.548, 'text': "so what we want to do next is oh also, don't forget to add at the end our parentheses and a closing bracket over here.", 'start': 472.578, 'duration': 13.97}, {'end': 487.908, 'text': 'All right.', 'start': 486.568, 'duration': 1.34}, {'end': 493.589, 'text': "And also we're going to have that checkbox and that's not going to be required.", 'start': 488.868, 'duration': 4.721}, {'end': 504.791, 'text': 'However, we need to reference so we can access it later on when we do the setup for that checkbox and making it change the validation on our name input here.', 'start': 493.649, 'duration': 11.142}, {'end': 509.052, 'text': 'So that looks like simply validate, which will be the name.', 'start': 505.331, 'duration': 3.721}, {'end': 514.052, 'text': "And then we'll just set it to empty right there.", 'start': 511.67, 'duration': 2.382}, {'end': 515.493, 'text': 'All right.', 'start': 515.013, 'duration': 0.48}, {'end': 517.735, 'text': "So let's go ahead and we'll save that.", 'start': 515.613, 'duration': 2.122}, {'end': 525.681, 'text': 'So now we want to add a custom method of add post for handling the submitted form.', 'start': 518.836, 'duration': 6.845}, {'end': 530.025, 'text': 'So just beneath the constructor, make add post.', 'start': 526.122, 'duration': 3.903}, {'end': 531.966, 'text': "We'll accept post here.", 'start': 530.886, 'duration': 1.08}, {'end': 536.77, 'text': 'And this.description equals post.description.', 'start': 533.067, 'duration': 3.703}], 'summary': "Adding a custom method 'add post' to handle submitted form data.", 'duration': 31.439, 'max_score': 472.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU472578.jpg'}], 'start': 89.083, 'title': 'Angular forms and reactive forms', 'summary': 'Covers starting an angular project with angular cli, importing reactive forms module, handling form control creation and validation. it also introduces reactive forms in angular, explaining properties, constructor dependencies, form validation, and custom method for form submission.', 'chapters': [{'end': 289.022, 'start': 89.083, 'title': 'Angular 4 forms tutorial', 'summary': 'Covers the process of starting a new angular project using the angular command line interface, including importing the reactive forms module into the app.module.ts file and importing necessary form classes in the component code for handling form control creation and validation.', 'duration': 199.939, 'highlights': ['The chapter emphasizes the use of Angular command line interface to start a new project, ng new, and the importance of having all the dependencies such as NodeJS and NPM. The tutorial highlights the use of Angular command line interface to start a new project and the importance of having all the dependencies such as NodeJS and NPM before proceeding further.', 'The tutorial stresses the process of importing the reactive forms module into the app.module.ts file and its inclusion in the angular forms library. The tutorial emphasizes the process of importing the reactive forms module into the app.module.ts file and its inclusion in the angular forms library.', 'The chapter explains the import of necessary form classes such as the form builder, form group, and validators from the Angular forms library for handling form control creation and validation. The chapter explains the import of necessary form classes such as the form builder, form group, and validators from the Angular forms library for handling form control creation and validation.']}, {'end': 564.597, 'start': 289.042, 'title': 'Reactive forms in angular', 'summary': 'Introduces the use of reactive forms in angular, explaining the properties, constructor dependencies, form validation, and custom method for handling form submission.', 'duration': 275.555, 'highlights': ['The chapter introduces the use of reactive forms in Angular It explains the properties, constructor dependencies, form validation, and custom method for handling form submission.', 'Form validation involves setting up validation requirements for form inputs The process includes specifying required fields, setting minimum and maximum length, and accessing checkboxes for changing input validation.', 'The constructor uses dependency injection for form builder It utilizes private form builder to form builder for dependency injection.', "A custom method 'add post' is created for handling the submitted form The method accepts post data and assigns the description and name from the form, which can be further processed or stored in a backend or API."]}], 'duration': 475.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU89083.jpg', 'highlights': ['The chapter emphasizes the use of Angular CLI to start a new project and the importance of having all the dependencies such as NodeJS and NPM.', 'The tutorial stresses the process of importing the reactive forms module into the app.module.ts file and its inclusion in the Angular forms library.', 'The chapter explains the import of necessary form classes such as the form builder, form group, and validators from the Angular forms library for handling form control creation and validation.', 'The chapter introduces the use of reactive forms in Angular, explaining properties, constructor dependencies, form validation, and custom method for handling form submission.', 'Form validation involves setting up validation requirements for form inputs, specifying required fields, setting minimum and maximum length, and accessing checkboxes for changing input validation.', 'The constructor uses dependency injection for form builder, utilizing private form builder for dependency injection.', "A custom method 'add post' is created for handling the submitted form, accepting post data and assigning the description and name from the form for further processing or storage in a backend or API."]}, {'end': 885.503, 'segs': [{'end': 665.304, 'src': 'heatmap', 'start': 564.837, 'weight': 0, 'content': [{'end': 567.602, 'text': "Let's go ahead and focus on the HTML.", 'start': 564.837, 'duration': 2.765}, {'end': 570.988, 'text': 'So control B, control B again to hide that.', 'start': 567.622, 'duration': 3.366}, {'end': 575.947, 'text': "All right, so there's a fair amount of HTML involved here.", 'start': 572.045, 'duration': 3.902}, {'end': 584.532, 'text': "And what I want to do first, before we begin that section is I'm going to import the front end framework called foundation,", 'start': 576.747, 'duration': 7.785}, {'end': 586.152, 'text': 'which I use a lot in my tutorials.', 'start': 584.532, 'duration': 1.62}, {'end': 592.856, 'text': "And it's just real quick and easy for structuring and setting up a form or a layout of a website.", 'start': 587.113, 'duration': 5.743}, {'end': 595.417, 'text': "So it's kind of it's basically a competitive bootstrap.", 'start': 593.236, 'duration': 2.181}, {'end': 597.739, 'text': "So we're going to hit Ctrl B.", 'start': 595.978, 'duration': 1.761}, {'end': 599.559, 'text': "And we're going to go down to our index.html.", 'start': 597.739, 'duration': 1.82}, {'end': 609.612, 'text': "And I'm going to copy and paste just above the closing head tag, this line right here.", 'start': 601.025, 'duration': 8.587}, {'end': 613.074, 'text': "So if I hit control B, you'll see everything you need.", 'start': 609.632, 'duration': 3.442}, {'end': 621.361, 'text': 'And if you want to go to the written tutorial of this, this tutorial, the written version, you can just copy this from the tutorial right here.', 'start': 613.174, 'duration': 8.187}, {'end': 623.663, 'text': "And that's just going to give us foundation right there.", 'start': 621.381, 'duration': 2.282}, {'end': 624.603, 'text': 'All right.', 'start': 624.303, 'duration': 0.3}, {'end': 628.006, 'text': "So now let's go back to our HTML real quickly.", 'start': 624.643, 'duration': 3.363}, {'end': 631.887, 'text': 'get started.', 'start': 630.726, 'duration': 1.161}, {'end': 638.35, 'text': "so I'm going to copy our first line let's get rid of all this stuff, alright.", 'start': 631.887, 'duration': 6.463}, {'end': 640.491, 'text': 'so what is happening here?', 'start': 638.35, 'duration': 2.141}, {'end': 649.616, 'text': "okay, so basically, we're just saying that if the name property does not exist, then show everything that's going to be inside of this div.", 'start': 640.491, 'duration': 9.125}, {'end': 654.018, 'text': "so real quickly, let's go ahead and close that off.", 'start': 649.616, 'duration': 4.402}, {'end': 665.304, 'text': "and so if the name property does exist, we're going to go show form info, which is going to be a local template variable.", 'start': 654.018, 'duration': 11.286}], 'summary': "The tutorial focuses on importing the front-end framework 'foundation' for structuring and setting up a website layout using html, with a demonstration of conditional rendering based on the existence of a property.", 'duration': 48.237, 'max_score': 564.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU564837.jpg'}, {'end': 699.277, 'src': 'heatmap', 'start': 674.588, 'weight': 0.714, 'content': [{'end': 681.372, 'text': 'So we use ngTemplate, and then we put a hash sign with the name, so form info.', 'start': 674.588, 'duration': 6.784}, {'end': 692.735, 'text': "Alright, so if name does exist, or if they already submitted the form successfully, then it's going to show this and not the stuff up here.", 'start': 682.232, 'duration': 10.503}, {'end': 694.816, 'text': 'Alright, so does it make sense? Hopefully.', 'start': 693.135, 'duration': 1.681}, {'end': 697.576, 'text': 'So we have a div class of form container.', 'start': 695.236, 'duration': 2.34}, {'end': 699.277, 'text': 'we have a div class of row columns.', 'start': 697.576, 'duration': 1.701}], 'summary': 'Using ngtemplate to display form info and conditional content.', 'duration': 24.689, 'max_score': 674.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU674588.jpg'}, {'end': 776.874, 'src': 'heatmap', 'start': 739.849, 'weight': 1, 'content': [{'end': 748.176, 'text': "you have to wrap form group inner brackets and we bind it to our form and remember that's the name that we gave it in our component,", 'start': 739.849, 'duration': 8.327}, {'end': 749.978, 'text': 'our form as form group.', 'start': 748.176, 'duration': 1.802}, {'end': 754.222, 'text': 'alright, so then we use I event binding on ng submit.', 'start': 749.978, 'duration': 4.244}, {'end': 761.927, 'text': "so when the form is submitted, then we're going to call add post and we're going to post or pass in our form dot value,", 'start': 754.222, 'duration': 7.705}, {'end': 768.911, 'text': 'which that will send in all of the input values that are contained within this form right here to our method.', 'start': 761.927, 'duration': 6.984}, {'end': 769.971, 'text': 'All right.', 'start': 769.731, 'duration': 0.24}, {'end': 774.613, 'text': "So next I'm going to go ahead and simply tape out the rest here.", 'start': 770.571, 'duration': 4.042}, {'end': 776.874, 'text': 'Class equals form container.', 'start': 775.013, 'duration': 1.861}], 'summary': 'Using form group binding and event binding for form submission in angular component.', 'duration': 26.896, 'max_score': 739.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU739849.jpg'}, {'end': 839.424, 'src': 'heatmap', 'start': 799.899, 'weight': 0.887, 'content': [{'end': 806.122, 'text': 'So we have our label of name, input type is text, and form control name equals name.', 'start': 799.899, 'duration': 6.223}, {'end': 811.584, 'text': 'So this right here, name has to match this right here.', 'start': 806.502, 'duration': 5.082}, {'end': 819.529, 'text': 'So this controls the validation of this input element with the form control name of name.', 'start': 812.324, 'duration': 7.205}, {'end': 820.77, 'text': 'Very, very simple.', 'start': 819.87, 'duration': 0.9}, {'end': 823.832, 'text': 'So next, we have a text area for description.', 'start': 821.371, 'duration': 2.461}, {'end': 825.954, 'text': "And it's the same exact thing.", 'start': 824.813, 'duration': 1.141}, {'end': 830.757, 'text': 'We have our form control name of description matches up to our component description.', 'start': 826.134, 'duration': 4.623}, {'end': 839.424, 'text': "there we go again, very simple, and then also we're going to have a checkbox.", 'start': 831.698, 'duration': 7.726}], 'summary': 'Form includes text input for name, description, and a checkbox.', 'duration': 39.525, 'max_score': 799.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU799899.jpg'}, {'end': 871.814, 'src': 'heatmap', 'start': 844.267, 'weight': 0.745, 'content': [{'end': 847.409, 'text': "here's our label right here on line 17 and then 18.", 'start': 844.267, 'duration': 3.142}, {'end': 849.971, 'text': 'we have a type of checkbox.', 'start': 847.409, 'duration': 2.562}, {'end': 850.732, 'text': 'name is validate.', 'start': 849.971, 'duration': 0.761}, {'end': 851.853, 'text': 'control name is validate.', 'start': 850.732, 'duration': 1.121}, {'end': 853.254, 'text': 'the value is one.', 'start': 851.853, 'duration': 1.401}, {'end': 854.875, 'text': "so if it's checked, that's the value.", 'start': 853.254, 'duration': 1.621}, {'end': 859.198, 'text': "it's going to be passing on to our ad post through our form.value.", 'start': 854.875, 'duration': 4.323}, {'end': 864.369, 'text': 'Okay so then, finally, we just have a submit button.', 'start': 860.106, 'duration': 4.263}, {'end': 871.814, 'text': "There's nothing special about this with exception to the property binding that we have on the disabled attribute.", 'start': 864.409, 'duration': 7.405}], 'summary': 'Form includes checkbox with value one and property binding on disabled attribute.', 'duration': 27.547, 'max_score': 844.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU844267.jpg'}], 'start': 564.837, 'title': 'Front-end framework and angular form structure', 'summary': "Covers importing the front-end framework 'foundation' for setting up a form or website layout, and explains the structure of an angular form, including the use of ngtemplate, form group, and form validation, providing quick and easy structure for html and demonstrating the binding of input values to the form's method.", 'chapters': [{'end': 640.491, 'start': 564.837, 'title': 'Importing front-end framework for html', 'summary': 'Covers importing the front-end framework called foundation for setting up a form or website layout, using ctrl b to copy and paste a line into index.html, and the quick and easy structure it provides.', 'duration': 75.654, 'highlights': ['The chapter covers importing the front-end framework called foundation for setting up a form or website layout, using Ctrl B to copy and paste a line into index.html, and the quick and easy structure it provides.', 'Foundation is a competitive bootstrap and offers a quick and easy way for structuring and setting up a form or layout of a website.', 'The process involves hitting Ctrl B, going to index.html, and copying and pasting a specific line just above the closing head tag.', 'The tutorial also mentions the availability of a written version for reference.']}, {'end': 885.503, 'start': 640.491, 'title': 'Angular form structure', 'summary': "Explains the structure of an angular form, including the use of ngtemplate, form group, and form validation, and demonstrates the binding of input values to the form's method.", 'duration': 245.012, 'highlights': ["The chapter explains the structure of an Angular form, including the use of ngTemplate, form group, and form validation, and demonstrates the binding of input values to the form's method.", 'The form structure involves the display of form information based on the existence of the name property, utilizing local template variables and ngTemplate.', 'The explanation includes the use of form group for form element binding, event binding on ngSubmit, and the handling of form validation and disabled attribute for the submit button.']}], 'duration': 320.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU564837.jpg', 'highlights': ['Covers importing the front-end framework called foundation for setting up a form or website layout, using Ctrl B to copy and paste a line into index.html, and the quick and easy structure it provides.', "The chapter explains the structure of an Angular form, including the use of ngTemplate, form group, and form validation, and demonstrates the binding of input values to the form's method.", 'Foundation is a competitive bootstrap and offers a quick and easy way for structuring and setting up a form or layout of a website.', 'The process involves hitting Ctrl B, going to index.html, and copying and pasting a specific line just above the closing head tag.']}, {'end': 1228.197, 'segs': [{'end': 989.135, 'src': 'heatmap', 'start': 901.713, 'weight': 0, 'content': [{'end': 906.035, 'text': 'and so this will probably be a good point to head on over to the browser.', 'start': 901.713, 'duration': 4.322}, {'end': 911.278, 'text': "check out the written tutorial and you'll see a section called styling the form,", 'start': 906.035, 'duration': 5.243}, {'end': 916.181, 'text': "and we're just going to copy and paste just a few rule sets in two different files.", 'start': 911.278, 'duration': 4.903}, {'end': 916.782, 'text': 'so control B.', 'start': 916.181, 'duration': 0.601}, {'end': 921.283, 'text': "I'm going to go to styles.css and paste this in.", 'start': 917.742, 'duration': 3.541}, {'end': 926.185, 'text': "It's just two rulesets or basically one import and we're just changing the background on the body.", 'start': 921.303, 'duration': 4.882}, {'end': 933.768, 'text': "We'll save that and then we'll go to our app.component.css and I'm going to paste in just a little bit here.", 'start': 926.705, 'duration': 7.063}, {'end': 936.304, 'text': 'Right there.', 'start': 935.783, 'duration': 0.521}, {'end': 939.486, 'text': "So what's happening is a very quick exclamation.", 'start': 936.944, 'duration': 2.542}, {'end': 944.71, 'text': "We have the form container, and that's just kind of a structure of the container that's going to house everything.", 'start': 939.526, 'duration': 5.184}, {'end': 946.712, 'text': 'It makes the background white, gives us some padding.', 'start': 944.77, 'duration': 1.942}, {'end': 952.436, 'text': "We have alert, which we're not going to mess with the alert yet because we haven't integrated it.", 'start': 947.132, 'duration': 5.304}, {'end': 954.098, 'text': "We'll cover that shortly in this video.", 'start': 952.496, 'duration': 1.602}, {'end': 959.602, 'text': 'We have our button and just styling a couple different things and an animation for our alerts.', 'start': 954.598, 'duration': 5.004}, {'end': 961.484, 'text': "We don't have to worry about any of that right now.", 'start': 959.842, 'duration': 1.642}, {'end': 962.624, 'text': 'But go ahead and save that.', 'start': 961.524, 'duration': 1.1}, {'end': 965.142, 'text': 'and visit your browser.', 'start': 963.721, 'duration': 1.421}, {'end': 967.603, 'text': 'Again, make sure your ng serve command is ran.', 'start': 965.362, 'duration': 2.241}, {'end': 969.164, 'text': 'And here we go.', 'start': 968.384, 'duration': 0.78}, {'end': 974.907, 'text': "So if we click out of it, we don't have any type of message because we didn't do that in the template just yet.", 'start': 969.284, 'duration': 5.623}, {'end': 979.97, 'text': 'But we can notice that the submit form, we cannot touch, cannot submit it.', 'start': 975.208, 'duration': 4.762}, {'end': 989.135, 'text': 'So if I type in, you know, ASDF here, and then also I start doing this so we can get to 30 characters.', 'start': 980.491, 'duration': 8.644}], 'summary': 'Styling the form by adding rule sets to styles.css and app.component.css, making specific changes to the form container, alert, button, and animation.', 'duration': 52.385, 'max_score': 901.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU901713.jpg'}, {'end': 1023.552, 'src': 'embed', 'start': 999.018, 'weight': 3, 'content': [{'end': 1006.86, 'text': "So real quickly, this is fine, but it's really not a great user experience.", 'start': 999.018, 'duration': 7.842}, {'end': 1017.107, 'text': 'So we should show an actual validation message that lets them know what exactly is needed, so they can get to submitting the form,', 'start': 1007.44, 'duration': 9.667}, {'end': 1020.75, 'text': 'because sometimes that can be confusing and extremely frustrating.', 'start': 1017.107, 'duration': 3.643}, {'end': 1023.552, 'text': "So we'll go ahead back to our code here.", 'start': 1021.31, 'duration': 2.242}], 'summary': 'Improving user experience by showing actual validation messages to reduce confusion and frustration.', 'duration': 24.534, 'max_score': 999.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU999018.jpg'}, {'end': 1103.547, 'src': 'heatmap', 'start': 1079.495, 'weight': 0.759, 'content': [{'end': 1092.479, 'text': "just with this first rule right here I we're gonna go ahead and I'm just going to put this is required, I'm gonna save it.", 'start': 1079.495, 'duration': 12.984}, {'end': 1097.484, 'text': "we'll go back to our section right here.", 'start': 1092.479, 'duration': 5.005}, {'end': 1103.547, 'text': "all right, we'll see by default, when the form loads, it says this is required.", 'start': 1097.484, 'duration': 6.063}], 'summary': 'Demonstrating setting a field as required in a form.', 'duration': 24.052, 'max_score': 1079.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU1079495.jpg'}, {'end': 1200.453, 'src': 'embed', 'start': 1149.971, 'weight': 4, 'content': [{'end': 1153.773, 'text': 'so our interpolation brackets will call this title alert.', 'start': 1149.971, 'duration': 3.802}, {'end': 1156.462, 'text': "We'll save.", 'start': 1155.902, 'duration': 0.56}, {'end': 1159.524, 'text': "Let's go back to our app component and add that real quickly.", 'start': 1156.522, 'duration': 3.002}, {'end': 1167.247, 'text': 'So title alert of type string equals this field is required.', 'start': 1160.164, 'duration': 7.083}, {'end': 1171.089, 'text': 'So now we can save it real quickly.', 'start': 1168.848, 'duration': 2.241}, {'end': 1171.729, 'text': "Let's go back.", 'start': 1171.109, 'duration': 0.62}, {'end': 1174.422, 'text': 'this field is required.', 'start': 1173.342, 'duration': 1.08}, {'end': 1176.043, 'text': 'Now, why would I want to do that?', 'start': 1174.822, 'duration': 1.221}, {'end': 1183.585, 'text': "Because we're going to be using this specific name field right here, along with our validate checkbox,", 'start': 1176.463, 'duration': 7.122}, {'end': 1187.466, 'text': 'to change the validation requirements when that checkbox is pressed.', 'start': 1183.585, 'duration': 3.881}, {'end': 1188.186, 'text': 'All right.', 'start': 1187.966, 'duration': 0.22}, {'end': 1190.827, 'text': 'So again, you can add this.', 'start': 1188.867, 'duration': 1.96}, {'end': 1197.029, 'text': "I'm just going to paste in a second one here for our description validation message.", 'start': 1190.867, 'duration': 6.162}, {'end': 1199.052, 'text': "So I'm going to paste this in.", 'start': 1198.052, 'duration': 1}, {'end': 1200.453, 'text': "It's very similar to the top one.", 'start': 1199.112, 'duration': 1.341}], 'summary': 'Adding validation messages for title and description fields in app component.', 'duration': 50.482, 'max_score': 1149.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU1149971.jpg'}], 'start': 885.743, 'title': 'Form styling and validation', 'summary': 'Covers styling the form with rule sets in styles.css and app.component.css, and implementing user-friendly form validation with interpolation to show specific properties, improving the user experience.', 'chapters': [{'end': 974.907, 'start': 885.743, 'title': 'Styling the form and adding rulesets', 'summary': 'Covers styling the form by adding rule sets in two different files, styles.css and app.component.css, including changing the background on the body and adding structure to the form container.', 'duration': 89.164, 'highlights': ['Adding rule sets in two different files, styles.css and app.component.css, to style the form and change the background on the body.', 'Describing the structure of the form container, including making the background white and providing padding.', 'Mentioning the inclusion of an alert and a button with specific styling, along with an animation for alerts.']}, {'end': 1228.197, 'start': 975.208, 'title': 'Form validation', 'summary': 'Covers the implementation of form validation, including the need for user-friendly validation messages and the use of interpolation to show specific properties, improving the user experience and avoiding confusion.', 'duration': 252.989, 'highlights': ['The need for user-friendly validation messages The speaker emphasizes the importance of displaying actual validation messages to improve the user experience and reduce frustration.', "Use of interpolation to show specific properties The use of interpolation to display specific properties like 'title alert' and 'description validation message' is demonstrated, enhancing the customization of validation messages.", "Requirement for the name field The requirement for the name field is illustrated through the use of interpolation and the 'validate checkbox' to change the validation requirements when the checkbox is pressed."]}], 'duration': 342.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU885743.jpg', 'highlights': ['Adding rule sets in two different files, styles.css and app.component.css, to style the form and change the background on the body.', 'Describing the structure of the form container, including making the background white and providing padding.', 'Mentioning the inclusion of an alert and a button with specific styling, along with an animation for alerts.', 'The need for user-friendly validation messages The speaker emphasizes the importance of displaying actual validation messages to improve the user experience and reduce frustration.', "Use of interpolation to show specific properties The use of interpolation to display specific properties like 'title alert' and 'description validation message' is demonstrated, enhancing the customization of validation messages.", "Requirement for the name field The requirement for the name field is illustrated through the use of interpolation and the 'validate checkbox' to change the validation requirements when the checkbox is pressed."]}, {'end': 1508.782, 'segs': [{'end': 1449.709, 'src': 'heatmap', 'start': 1422.147, 'weight': 0.714, 'content': [{'end': 1425.729, 'text': "And that's giving me a red line because that is not to go there.", 'start': 1422.147, 'duration': 3.582}, {'end': 1427.01, 'text': "It's to go here.", 'start': 1426.069, 'duration': 0.941}, {'end': 1428.19, 'text': 'All right.', 'start': 1427.95, 'duration': 0.24}, {'end': 1430.772, 'text': "So we'll go ahead and save this and we'll go back.", 'start': 1428.871, 'duration': 1.901}, {'end': 1432.853, 'text': 'All right.', 'start': 1432.673, 'duration': 0.18}, {'end': 1442.098, 'text': 'So just to demonstrate how this works right here by default, because this is not checked on, we can satisfy real quickly.', 'start': 1432.893, 'duration': 9.205}, {'end': 1447.247, 'text': "by hitting any type of character, because it's simply required.", 'start': 1444.005, 'duration': 3.242}, {'end': 1449.709, 'text': 'Now, if we turn this on, watch what happens.', 'start': 1447.367, 'duration': 2.342}], 'summary': 'Demonstrating default behavior of feature, indicating required input.', 'duration': 27.562, 'max_score': 1422.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU1422147.jpg'}, {'end': 1482.985, 'src': 'embed', 'start': 1454.992, 'weight': 0, 'content': [{'end': 1462.377, 'text': 'That is basically the power of reactive forms in that it lets you to control validation through your component class.', 'start': 1454.992, 'duration': 7.385}, {'end': 1471.143, 'text': "You can also do unit tests on reactive forms, whereas these are two things that you can't really do with template-driven forms, which I'll cover.", 'start': 1462.417, 'duration': 8.726}, {'end': 1473.403, 'text': 'at a later date.', 'start': 1471.943, 'duration': 1.46}, {'end': 1474.844, 'text': 'uh, but yeah, there we go.', 'start': 1473.403, 'duration': 1.441}, {'end': 1478.904, 'text': 'so this is my awesome title.', 'start': 1474.844, 'duration': 4.06}, {'end': 1482.985, 'text': "corsetro is great, that's a shameless, you know.", 'start': 1478.904, 'duration': 4.081}], 'summary': 'Reactive forms allow validation control and unit testing, unlike template-driven forms.', 'duration': 27.993, 'max_score': 1454.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU1454992.jpg'}], 'start': 1229.338, 'title': 'The power of reactive forms', 'summary': 'Demonstrates how to control validation through the component class, including setting required and minimum length validation, showcasing the advantages over template-driven forms.', 'chapters': [{'end': 1508.782, 'start': 1229.338, 'title': 'Power of reactive forms', 'summary': 'Demonstrates the power of reactive forms by showcasing how to control validation through the component class, including setting required and minimum length validation, and emphasizes the advantages over template-driven forms.', 'duration': 279.444, 'highlights': ['The power of reactive forms lies in controlling validation through the component class, allowing the setting of required and minimum length validation, as demonstrated by updating validation rules for a form field based on a checkbox value.', 'Reactive forms enable the ability to conduct unit tests, a feature not available in template-driven forms.', 'The chapter emphasizes the advantages of reactive forms over template-driven forms, such as the ability to control validation through the component class and perform unit tests.']}], 'duration': 279.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bo1Wu0aiigU/pics/bo1Wu0aiigU1229338.jpg', 'highlights': ['Reactive forms allow setting required and minimum length validation through the component class.', 'Reactive forms enable unit tests, not available in template-driven forms.', 'Emphasizes advantages of reactive forms over template-driven forms.']}], 'highlights': ['Reactive forms enable unit tests, not available in template-driven forms.', 'Reactive forms showcase dynamic validation based on user input.', 'Demonstration includes ease of form submission after validation.', 'Emphasizes advantages of reactive forms over template-driven forms.', 'Form requires minimum 3 characters for name and 30-500 for description.', 'The chapter introduces the use of reactive forms in Angular, explaining properties, constructor dependencies, form validation, and custom method for handling form submission.', 'The tutorial stresses the process of importing the reactive forms module into the app.module.ts file and its inclusion in the Angular forms library.', 'Form validation involves setting up validation requirements for form inputs, specifying required fields, setting minimum and maximum length, and accessing checkboxes for changing input validation.', 'The need for user-friendly validation messages The speaker emphasizes the importance of displaying actual validation messages to improve the user experience and reduce frustration.', "Use of interpolation to show specific properties The use of interpolation to display specific properties like 'title alert' and 'description validation message' is demonstrated, enhancing the customization of validation messages.", 'Adding rule sets in two different files, styles.css and app.component.css, to style the form and change the background on the body.', 'Describing the structure of the form container, including making the background white and providing padding.', 'Mentioning the inclusion of an alert and a button with specific styling, along with an animation for alerts.', 'Reactive forms allow setting required and minimum length validation through the component class.', 'Covers importing the front-end framework called foundation for setting up a form or website layout, using Ctrl B to copy and paste a line into index.html, and the quick and easy structure it provides.', "The chapter explains the structure of an Angular form, including the use of ngTemplate, form group, and form validation, and demonstrates the binding of input values to the form's method.", 'Foundation is a competitive bootstrap and offers a quick and easy way for structuring and setting up a form or layout of a website.', 'The process involves hitting Ctrl B, going to index.html, and copying and pasting a specific line just above the closing head tag.']}