Advanced Form Component with VueJs | Sebastian Sulinski | Skillshare

Advanced Form Component with VueJs

Sebastian Sulinski

Advanced Form Component with VueJs

Sebastian Sulinski

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
40 Lessons (6h 43m)
    • 1. Introduction

      7:36
    • 2. Set up

      10:50
    • 3. Form wrapper

      7:30
    • 4. Standard input tag

      4:16
    • 5. Text input

      12:22
    • 6. Event bus

      6:03
    • 7. Input validation rules

      11:21
    • 8. Validator class

      11:59
    • 9. Validate method

      10:28
    • 10. Validation rules

      10:11
    • 11. Input wrapper

      11:39
    • 12. Validation message component

      12:23
    • 13. Alert and warning

      15:05
    • 14. Error handler

      5:33
    • 15. Confirmation dialog

      15:22
    • 16. AjaxCaller mixin

      13:53
    • 17. Behaviour class

      14:15
    • 18. Reset and clear

      7:14
    • 19. Buttons

      4:33
    • 20. Disabler

      12:12
    • 21. Trigger mixin

      8:03
    • 22. Form trigger

      8:04
    • 23. Custom icon

      5:29
    • 24. Base input

      10:02
    • 25. Checkbox input

      12:23
    • 26. Removing checkbox entry

      8:35
    • 27. Checkbox group

      12:48
    • 28. Master checkbox

      13:29
    • 29. Refactoring to renderless component

      17:48
    • 30. Multi checkbox trigger

      10:40
    • 31. Trigger behaviour

      19:01
    • 32. Radio button

      10:09
    • 33. Single select

      8:26
    • 34. Dependable dropdown (Part 1)

      6:57
    • 35. Dependable dropdown (Part 2)

      7:38
    • 36. Dependable dropdown (Part 3)

      6:21
    • 37. Multi-select

      3:34
    • 38. Text area

      7:28
    • 39. CKEditor

      12:08
    • 40. Toggle disable

      9:08
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

147

Students

1

Project

About This Class

Over the past few years VueJs has become one of the most popular JavaScript frameworks. This is mainly due to its intuitive and easy to learn api - reason why so many developers opt in to use it over some other, well known JavaScript frameworks.

During this course you will explore one if it's most powerful tools - components.

We will learn how to code an Advanced Form Component with a set of sub-components to tackle most of the requirements of any online form.

We will have a look at how to produce a range of input components, how to integrate internal and external triggers, how to integrate CKEditor as an input type component to seamlessly work with our Form Wrapper.

Meet Your Teacher

Hello, I'm Sebastian.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: What's up, guys? Today we are going to build a form component. It's actually going to be a set off for components which will basically form this rapper for our form. Now our form will have several different options, different types off their imports. And so let's start with with the 1st 1 which is that drop down menu can see on the left. Inside he had. The title is changing whenever we changed the value. Obviously, first name Sebastian. As you can see, some of the fields have been pre populated when the form first loaded as well. So these are stunned that text fields and then we have email field as well. So let's say in four, as is the tutorials dot com you can see obviously the values updating within the view console on the left Insight A. Then we have a password as well. Let's say pass wore their radio and exclamation at D end. As you can see as well that has updated so these other standard fields. Then we go to the check boxes, and we're going to build a full different types of check boxes in a concert on the left inside you can see we have the share entry which, when checked, is represented by letter A. When we uncheck it, you can see that changes to be. And now you will be able to associate any type of value for checked and unchecked. So that's one type off their checkbooks. The other one. You can see that we don't have privacy on left inside. But if I check this box that has it to the index with the value set to true, if we aren't check it that disappears from the list of items. Then we have this. I agree with terms and conditions in this case, and it simply changes flak from false to true for this terms here. So that's three of them. And on the right hand side, we have a group off check boxes and they will simply aren't values to the array. This colors here. So have a look at the council when I'm actually checking them on the right hand side so I can see Blue green an average and at the moment we have strings, Barbi C will be ableto associate inter just as well or any other type of value. They would like to associate with this checkbook. See, when I check them, they are disappearing from misery. Then we going to have a radio button as well. City we have three pre selected when you change it, that value changes as well. On the right hand side, we have ah, multi select. And this multi select is for the fruits index. We have banana apple pre selected. If I click on up Oh Onley the banana goes off And if I select them all obviously all these items are being are that's you cannot one by one and so on. Then we're going to have a text area as well the exert. If Ijaz changed to say some other content goes here, you can see this also updates on the left hand side will also answer Kay editor to our form component. You can see we have this body with the HTML talks. So it's changing. So heading goals here then return and some content girls here as well. Obviously I would have to expand this a little bit so you can see the entire centers. So all this is updating as you can see at the bottom and at the top we have set of buttons one to submit the form. The other one is to reset it and the last one is to clear it. Now reset will reset the form to its original value. So if we had any values already pre populated in this form, then reset. If I just hit it, you'll see all the values which have added are removed. But the ones that where the originally are staying solder trick boxes and everything else remains as it as the way origin. Now, if I Keats clear, that removes everything from the phones are old pre selection also, girls. Okay, then we have this seven of top buttons outside of the form talk, whereas the bottom wants inside of the forms like in both of them, work exactly same way. So we learned how to do this as well. Now, if I hit submit, you'll see we're going to see this dialect at the top. So we learned how to do these dialogues for errors for confirmations and so on. And as you can see, we also have the validation with the message. And when the field has invalid input, it will also have this red color about that's entirely up to you, if you will want to use it or not. But we're going to go through this as well. So if I find since check these boxes, are we going to have different types of validation as well? If I heat summit against of these messages are disappearing here we have to select between one and two, so if I select to off them, it's all going to be fine. If I saw, like the 3rd 1 you'll see that we are getting that validation message maximum. We off items should be, too. And what else can I show you? Here are thing that's pretty much everything for now. For the past, were we going to use the regs as well? All this to come later on. So this is the basic From now. Later on, we're going to also learned how to do multi checkbooks. So say we have the formalist off items where you want let's say, seven items to be removed or exported to see his video, anything like this. So we're going to learn how to do this taco button one which selects all of them or de select them and then when we are selecting single ones, obviously the status off the main one changes as well. And if we now hit on Expert, for instance, this will return the three items that we've selected, it's going to send us to a new endpoint, and obviously these items were only going to be displaying them in the browser. We not going to be processing any of this request, actually with using database or anything like this. So if I select all of them as well remove, you'll see the confirmation message right now is going to show off the three seconds and then we go. The following records have been removed because all of them were checked. Okay, so this is a multi checkbooks. We will also learn how to do dependable drop downs. And there will be three different types 1st 1 that doesn't make any Ajax coals. So we are loading the page on when we load the page. We also passing the values as trade to the few. And obviously when we select one item the items in there the following drop down will be fielded by the previous election. So you see green, orange, yellow when we select small when we go for medium is going to be blue, white, black and so on I select blue We have again fielded values for the last item here And if I change it, this will be different as well. So these do not make any Ajax Cole. These items will be pushed into the view when the page loads. Now the next one will be using agents. So every time we sell it something the the Ajax colors being made and the values returned based on what selection in the previous job done has been made. So we have green orange. If I select 12 we have brown and being If I do this being, for instance again, the values for the last one are changing now with this difference between this and the next one is that with the last selection, we don't make another cold because obviously the previous one will fetch all the records for the last item. And we don't have to make any other calls for e commerce website, for instance, you would also probably needs to fetch and the price and some other things with the last selection. So this is where this agents with summary comes in. So we're going to sell it So my tempts, you can see that at the moment we have police select all attributes to reveal the price. And once we sell, like the last item that makes the Ajax culture the server and gives us the price So we will have a different price based on the different a selection of Let's no dive to the next video when we start by setting out power project. 2. Set up: to get a started off prepared the exercise files, which you can get at. Get Hap ad SS The hyphen tutorials for it slash view hyphen form hyphen component. You can either fork it and clone. It's simply downloads compressed files directly to your machine once you've done it extracted to the director that you're going to be easy for this project because of the ever changing nature off cold within the packages and different libraries, you may some sensi discrepancies between the exercise files, what's indie exercise files and what's on the actual recording. Whenever possible, I will describe the change, but if you see this sort of changes, obviously don't panic. It's only being updated because, obviously the newer version of the package has been provided and cold heads to be changed in order for everything to work. No, let's have a look at the package that Jason within the package the Jason the package is the main packages that we're going to need for this exercise will be access, then lot of l mix to compile all the assets as well as view. I'm also using foundation for sites if using bootstrap on the other framework for styling. Perhaps using your own custom standing there obviously will not need this. All the other dependencies have been installed automatically because they are required by these other packages. So if you know, close it next. Let's have a look at our resource. Is Danek tree offsets and suss? Here you will see our entry point is Abdel and CSS. With three imports. We are first important. Google phones this for about a condensed, then default. Zero foundation settings found as well as other components. Five. Let's close this father have a look of that Settings within their default deserve foundation settings. I only pretended this robotic on dance fund to this body phone family variable components dot s CSS file Here. What we have is the import off the main foundation file and including some off the TZAR Foundation components, which we will be using during this course. Then we also import some custom components. Let's quickly have a look at these within the components direction. 1st 1 is the form which is adding some ex styling to them to the form itself. Things like the validation colored alert is the threat than V cloak. When the component isn't quite ready. Make sure that it's not being displayed form for their transitions for the text area input and select from the select. We have the default height sets to seven r e m for the multiple one on Lee that involved flak on any of the inputs as well as the CK editor Proper will have this border color against sets to read Checkbooks group. We have some standing for this as well. Okay, so that's how it formed. Then we have for the layout is just to show the layout of the page some default starting. Obviously, you may ignore this completely. Then top dialogue is this dialogue that shows when we trying to submit the form, whether it's a confirmation or error or anything like this. This is the styling that's going to be used together with this component. We also have edit adult SC Assess Fine, which will be used together with the CK editor. We import default up file and art some parting to top right bottom and left off the body talk. So that's all in terms off our SAS files. Then if we open our Js directory, our entry point will the up don't g s first were important. Bootstrap. So let's have a look at this file. The first thing we do hear ISS we registered global access. We attach it to the global window object. Then we are some Heather's 1st 1 html edged be request and then see SRF token, which we are fetching from the meta talk. We open our views Templates up, Doc Blade. You'll see we have this stock here right at the top and this CSF underscore Tokcan generates some random talking to be used with together with the form requests. Then we have a view which we also set globally so we can access this from anywhere within our script. Next thing, we have directives of Artists Directors file which has just a single direct difficult for locals which will allow us to art focus to any input. Then we import components fire, which is currently empty. Lastly, we instant shade view and attach it to the element with the I d up. If we open our abdel blade dot PHP file, you'll see that the first stock that's after the opening body attack is the dif with this exact idea. Okay, so that's everything in terms off JavaScript and sass files. Now let's have a look at our Web park. Don't mix of Js file. We are first importing our a lot of a mix. Then we are using our entry point files Abdel Gs, Abdel s CSS and Ed. It'll adult s CSS and the output will go to public Js and public SCS says directors, which we already have here. Then we are also generating source mops as well as versions and versions. By using this methods we are generating, this makes manifest Jason. You can see that when we are pointing to a specific file, the actual path that we're going to get will contain the square stream with the I D and some unique identify which every time you we are going to re compile files well changed. This is to prevent browser from using a cached file whenever the new version of the father's available. OK, so that's our Web park. Don't mix. Now let's have a look at the resource is director again and now views, template and up. Dolt blade dot PHP We always in this mix helper function to import our assets. So we have this up dot s CSS and up dot Js. But because this mix help a function uses this makes manifest. What will actually be printed out will be destroying with this idea in terms off our where routes. If we now have a look at the roots eso going to rules and web dot PHP off split them into three controllers. 1st 1 the main controller. We have a landing page with the form and then for storing the record. When we going to be sending their requests using the polls method this store method, then we're going to have three methods for the multi checkbooks controller first on the landing page with the form, then we going to removing the record with the destroy using the post and then any whether it's going to be post or get methods for the export for their dependable drop down controller, we go into half three methods. Index attributes and store index will display the form polls thing to attributes will get us attributes off the next dependable drop down menu and then the last one posts as well to send the request with the data we've selected, there are a couple of things that have added to this laudable insulation. 1st 1 is discussed. Um, Helpers file, which contains two functions. First ones is empty, which basically checks whether the values empty and it's not numeric. So if we passed zero, it's not going to be empty and then is not empty, which is using is empty but negates it. That's our helpers filed. This has been registered within the composite of Jason. You'll see about of this files entry here for this help. And the next thing is the way we actually going to be returning the validation errors from the request by default. A lot of old Jason validation errors are format. In the following way. We have a message with some default message, and then we have heirs and heiresses contain fields with associate ID error messages. Now this works fine with just service side validation. However, if we also use JavaScript, validation known declined. Before we actually send the request to the server, this would mean that we have to duplicate the same message into different places. To overcome this problem. The best thing to do would be if our request actually send the response in the following four months now, rather than having the message, we have the index off the rule that felt. What this allows us to do is to have validation message within the view and Onley reveal it with JavaScript. When the given validation rule felt to tackle this off over written two methods on the default validator of lot of l 1st 1 is validate using custom room. That's for custom rules that we might be creating the only half a single one for the password here. And then we have art failure methods. Let's have a look at how they work. First of all, we check in if they're validation has failed because we have this exclamation mark before passes, and if it doesn't expect Jason, then we are returning the default behavior. Otherwise, what we are doing is for failed rules. We said the rule as index and we said it to an empty array, then for the messages. What we doing? We simply are doing the rule itself now for heart failure. Similar situation with check. If it doesn't expect Jason for 1000 down, we are returning the default behavior. The default, which comes with a lot of L otherwise. What we doing is we are just are doing the rule itself as a message and para meters for the failed rules so that sit in the Valley. Data have also other death rule contract sold. Then if we go to the rules, you'll see our password has a Parton and we have a message. And because we are implementing this rule contract, we also have to have a separate rule method which returns there. If we just go back to the validator, can see we're calling this room method on the rule instance. That's why we can obtain their the actual rule name. Okay, so if we close all these files, I obviously had to register this new validation service provider within the up dot PHP file . You'll see that I've removed the the original validation service provider and out it's the custom one. So these are the only additions and changes to the original lot of all installation. Now that we have checked all this, let's open the terminal and first start by installing old composer dependencies. So composer install and that will install dependencies or packages that we require from a project. Once this has bean done. Next thing will be NPM install to also installed all javascript dependencies. And lastly, we need to copy the envy dot example toe pnv and then Ron ph. B rt son key generates. And now if we open our project in the browser, you'll see we have the landing page with the navigation we've seen in the introduction video. 3. Form wrapper: it is now time to create our first component under the resource is assets Js Let's create a new directory for our source files. So s a R. C. Within this director, we're going to create another one for components. So components and within this one, we are going to create one specifically for our form components. So it's going to be called a form and our first component will be rapid for the form. So I'm just going to create a new fall rapper adult view. And within this far, what I'm going to do is start with script darks and inside of the script talks. I'm going to start with export default and recreate object literal here. And we start with the props what sort of properties we will require for this component. The first property will be called group. The group property will represent the identity associated with all form elements, things like inputs, buttons which may be within as well as outside off the form robber. This specific property will be off the type string and it will be required so quiet set to true. The next property will be behavior. Behavior will represent the action which will be triggered after we've received the successful response from the server. So what should happen with the form ones? The form has been successfully submitted and the response has been received back from the seven so behavior and this behavior will be off the type string as well and it will not be required, so I'm going to set it required. False. Next, let's create data methods which will return an object. And here we will have fields which will contain the collection of all of the form inputs by default who set it to an empty object and the next one will be validation back. This one will also be an empty object by default, and it will contain all validation rules for our form fields. Now let's create templates. Talks right above our script talks templates. We going to start with the form which will have no validates our tribute associated with it because we don't want default browser validation to kick in. We want to use only our own JavaScript based valuation, and within this form we're going to create a slot and will associate a few attributes with it by passing them into this lot. We start with the group. We want to pass this property group to the slot. We start with Colon group and group. Then we are going to pass through our fields from the data object. So Fields, starting with Colin as well Fields. And lastly, we go into past validation using our validation back. So all these three elements and I dynamically pass through to the slot, meaning that from within this lot will be able to access these properties sorts of property group. And then obviously our dates are fields and validation back by using this currents, obviously we were able to dynamically associate these properties and data with these are tributes. That means that they will also reactively change within this slot when the changes will be applied from within their component. OK, so that's our slot. Let's now register this component. But in our components that gs, we're going to start with view component and this one will call form robber and now require we go to from the current directly to source, then components, form and robber, and we don't need the Delta view extension. A lot of all mix will automatically figure that now one of the things that has changed recently is how we actually important modules. So when we are registering component from now on, we will have to use adult default to actually call if we open our robber. You see, we exporting default off Jatiya now, in order to imported before it was necessary and now you have to use dot default. So every time I'm registered in a component with within any off these videos, please make sure they appendix don't default where I haven't done it. Now the newer videos will have it already bounced down many videos that has have already been accorded. And obviously I haven't done this because I was using the previous freshen off the packages . Now let's open package that Jason and have a look at the Scripps we have available here. We will be using either death or watch. And when we come powerful production, we just use NPM Ron production. So what we want to do now is go to our terminal and Ron NPM run death for no, and everything has compiled. Let's now go back to our every time going to close this package to Jason. Have a look at what we have If we open our public J As you can see, we have this up the G s. We also have up Js mop as well as our CSS director with up Nazi SS and it's mop and editor that see assess with its own mop. So now that we've compiled our view component together with all other assets, we can open our views. Let's open main index, don't blade. And now what we can do a stew art our form rapid salt form rappin. And within this form robber, we're going to create dif wit. Slot scope equals props. And now within this dif, we will be able to use props and call anything off these properties that we passed through . So, for instance, props dot group props dealt fields prop stopped validation toe access contents off all these properties. Okay, form Rapper obviously requires a few attributes, so let's out them. We have group and we have behavior. Group is required. Behavior is not so Let's start with the group group is a string, so we don't need the column at the beginning and I'm going to give it a name off. Update hyphen form and the next thing I want to aunt is V hyphen cloak. This will ensure the component doesn't show anything in the browser until it's actually fully loaded. Okay, so now that we have it all, let's just save this file and prevue everything in a browser. If we open our developer tools, some mortals and development tools in Google Chrome then expand our up container. Great concern. And there we go, our form with no validate our tribute and an empty DIF, which is representing from Go back to our editor, is def with a slot scope. Obviously, we haven't got anything inside. That's why there's nothing else. But as you can see, our component is now rendering in a browser. If we open our View council, you'll see we have our form rapper with our behavior, which we haven't defined. We have a group which is update form fields, which is a numpty object as well as validation. Bach, also an empty object at the moment 4. Standard input tag: In a previous video, we started creating our form Robert Component Components Templates contains the main form tack and inside of this form talk. We have a slot slot Arcs is a placeholder for whatever we want to put in between the opening and closing talk off. Other component. In this case, we have this thief. And by using slot scope, we can now access all of these properties which we associated with Sloat by using this props keyword. In other words, if we want access to group, we can use Props Group, and this will give us the value. Associate it with this group property. Let's no open our index that plate dot PHP and in between the opening closing def talk with this attributes. Slot scope. Let's create a field set with the class field set now inside off the stark Let's put a legend, which will say personal details, for instance, and here I'm going to start with dif with class great X. I'm using as their foundation X y great. If you are using any other frame or going out of styling, Cree free to replace it with whatever you have. I'm going used to use greet margin X and dent. If with a class sell on small devices, I want this. They have to be all 12 Collins on medium and up. I wanted to go half So medium six And here I'm going to start with the standard input talk . So input we will use the type text. We are going to give it a name off first name I D or first name as well and let's associate V model off props, fields and first name. And let's close it for now. By using this V model, contribute, we will be able to synchronise value typed into this input with our form robber. At the moment, as you can see, our fields, property is just an empty object. So if we preview it in a browser, we should see an empty object until we actually start typing into this input field. So here is our new input field, which we've just added our form rapper, you can see fields Data property is at the moment empty. But the moment we start typing, you can see this has added this first name to this fields object. If we remove everything, it will stay there as an empty valued property, but it will not be there when we first load the page. As you can see, Fields is still empty. So that's one of the issues using a standard input stack. Now if I would like to have some value associated with this input when the page for his lord So let's use value equals past Young, for instance, and if we previewed in the browser, if I reload the page, you'll see. First of all, we don't see anything in this input. Then our fields is still empty. And regardless of the fact that we actually specify the value attribute, this value is nowhere to be seen just to ensure that we actually don't have anything within this field. And it's not just the View Council. Let's go to the council. As you can see, our form rapper is represented by this dollar son VM zero. So if we type in dollar sign VM zero and then if we go full stop fields and its search for this first name, if we return, you can see it's undefined, so it really isn't there until we start typing. As you can see, this is when this property is being added to this fields object. So these two are only a few off the problems with the standard input tax. When dealing with few components. In the next video, we'll start looking into building our own custom text input component. 5. Text input: in his video. We're going to create our first input component. We're going to put it under the form under the form. We're going to create a new directory for our inputs. So inputs and another directory which will be input, we're going to have separate ones for sale, X texture and so on, so input. And here we're going to go for the text input. So just text file. I'm going to create it as a plane. Files are text adult view. And within this fire, what I'm going to start with is going to be a template, and we're going to leave it empty for now. Then we're going to start with the script and within the script, we're going to export default, object, literal and here against that with properties. So props and the object and what sort of attributes we want to attach to the talk off this component. Now, 1st 1 will be the group because we need to identify it. We need to connects it with the Wrapping Forms group, and that's going to be off the type string and for required, we going to set it to false and actually we need to change this under the rap as well. I just remembered that obviously here we've said too true. Let's let's change it to false and what this will allow us to do when we're going to have only a single form on the page. We will not have to set the group to make our events and business work together. Okay, so that's a wrap updated. The next property is going to be a name, and again, that's going to be of the type string, and it will be the quiet so required set to true. Next one will be I d type string as well, and this one will be non required, so required sets to false. Next we will have a value and we only going to specify the default value should be just an empty string. Then we will have current value, which will also differ on current with tea, which will also default to an empty string. Current values, the value that we wanted the inputs to load with. Then we're going to have a place holder. This one will also be off the type string, and it will be none required. So required sets, too, falls after placeholder, we're going to focus, and this one will be of the type bullion and the default value will be false. Now focus will be used together with this directive that have provided. Yes. So when the form for its loads, if it will have focal set to true, then we are going to make sure that the focus is within the given input. Okay, then we have marks length and this one will be off the time string and will say that this one is known, required, so required said to falls after the marks length we going to have outer complete and for all to complete type string as well and it will be known required saw required set to false . Okay, so these are our wear properties After the props property, let's art data. This needs to be a method of function which retains an object. And here we go into art identity data property which will check if this idea is present Then it will return it. Otherwise it will use this name. This is to allow us Onley provide the name attribute without the i d. Most of the time you will have the input, which I D and name are the same. So this is basically talking this sort of scenario. Otherwise, obviously, you can always specify different idea than the name. That's why we have I d said to non required, because if the name is the same as I d only gonna have to provide the name now, our templates, input, stock. And we start with the attribute type which will be texting this case. Next will be I d. But we proceeded with the column, So I d we person this with a column Because we wants to return the value associated with the property. We don't want to return the string. So identity. We don't want to return the string identity. You want to return the value associated with this property? The same ghost, full name. We go full name, then we have value value. Then we have marks length associate with marks length followed by a placeholder place. Hold their After this, we have out off complete. After that, we are going to use this focus directive, so v focus and it will apply focus if our focus property set to true. And now let's register some input listeners. So v on, We are going to create a computer property input listeners. Let's copy the name and it's scroll down to bottom after the data method, Let's create computed property as an object, literal in its pace. The name that needs to be a function. And here we're going to return object a sign and we're going to use an empty object. And then we are going to use default listening. It's off this, at least nurse, which represents all default import listeners. In other words, if anyone wants to attach any event listener to this given components talk, it will still work with this input. And now we want to override the single one, which is input. That will be a function which takes event as an argument. This and we're going to go for a meat methods which will create in just a moment we take event target and we take its value. So whatever is in sight off this, given input when we are actually typing in past this to this a meat method. We haven't got this method yet, so let's quickly create it. After the computer, let's create methods property and here we're going to have this meat method with the value as an argument and here we're going to use views built, in instance, method and meat, which is this with the dollar sun and meat. And we are going to pass the type of the event which is input, and then the value we wants to send. What this method will do is it will inform anyone that listens to this event in our case is going to be our wrapper component which wraps this child component inside of it that the value off this input has changed. Let's now also on the mounted method which will be triggered when the component is ready. This a meet with this current value. What this will do is when the component will be ready on page load. This mounted method will be triggered and this will in return, called this a meat method with the value Doug with associated with the current value property and out in the return will obviously update the value start on the robber. So let's now save everything. Let's art our component. So I'm going to duplicate this first line and just change it to text in boot And then let's change the name here. It's going to be inputs, inputs and text. Now let's save it. Let's open terminal and let's run NPM Wrong death. The funds have now compiled so we can clear the council. Let's go back to the editor and what We are going to close all these. Let's open our main index. The blade. Let's replace the default inputs tank that we've audit in the previous lecture. Let's replace it with the text inputs now and we go into art all these properties. So we have group first Group which will be taken from the form rapid groups. I'm just going to use props and group here so that will dynamically be passed to this child component. Next, we're going to have name, which is just a string. So first name, for instance. Then we are going to have V. Modell to tell rapper this is the field that we are actually associating with this component that is going to be props, fields and its first name. Then we are going to have current value, which I want to say to say Sebastian, then we're going to have focused. Do we want for cause. Yes, let's put focus on it. So with Cullen, focus because we need to pass their bullion value true. Then we're going to have placeholder. I will set to first name. After this, we're going to have marks length. Let's specify it as nine on the nine characters and an outdoor complete will said to given hyphen name. Okay, if we save it and prevue everything in a browser now, first thing that you will see immediately is the finance dance. The value that we specified for our current value is now actually displaying it within the input. We also have this focus. If I reload the page, you'll see the focal stays there. So the focus directive kicks in as well. If we now have a look at our form rapper under the four of you console, you'll see that the fields are now pre populated. We have this first name with the value that we specified, least it under the fields off the form Robert. So if we go back to the yet, it's all let's have a play with this a little bit, you can see that we have this current value specified. If we don't specify. Let's see if it's going to show up as well. If we refresh the page now you see their field is empty still with the focus. If we check the from rapper, you'll see we still have the property. But now it's just an empty string. Another thing. If we now actually preview the output, the HTML output off this input will see we have type Text I D. First name and name first name. That is where this identity data property kicks in as well, because obviously we didn't specify the I D. But if we want to change it, let's just specifies I d strictly here on this. Imports are the I D. Let's say first name hyphen one. If we save it. Previewed in a browser refresh, you'll see that the I D. Now has changed. But if we don't specify it, it will take the same name, the same value as the name property. We have placeholder, alter complete as well. But one thing that I can see is missing is the marks length, and that's probably because I must have misspelled something. Let's just quickly go back to the editor. Yes, I have Marx length t h. And if we let's just from office, I destroy. And if we check the same under the text view yet the same thing age D rather than t age if we save it now, if you re compile the files, some NPM run deaf. And if we know Prevue everything in a browser fresh. Now we have max length nine. Let's try 1234567890 doesn't go. So max length works as well. If we remove it, then you can see that obviously our place holder is also in place. If you would like to read more about the things we've covered in this video, you can navigate the view gsd orc. And under the Components section, you can read more about custom events about binding native events, two components, something that we've covered as well with this input listeners and so on. 6. Event bus: in this video, we will have a look at the event. Bus event Bus will allow a seamless communication between components by dispatching and listening to the events. First of all, what we need to do is create a new directory for these files because these won't be components, actually. So under the source directory, if we create a new one, call it core, for instance, you can call it obviously whatever else you like on the discord directory, I'm going to create new JavaScript file called Event Bus. And what I'm going to start here with is going to be expert default class event bus. And this event boss will have a constructor which will set the property, this bass property to new view. Instance we will also have to methods. One will be to fire. The events are fire. It will take events because I will allow and the ray off events. And then we're going to use the rest perimeter to allow represent an indefinite number of arguments so it can pass it many arguments as you want. So three full stops end. We call it data. So that's how we fire event. And for the listener we are going to have a listen method, and again, it's going to allow multiple events at the time. So events and this one will take a cold back. So what we want to do when this event happens, let's first start with a fire. And here we are going to first check if the events argument is off the array type. So if we actually going to check against it, so isn't Array is a race. So using global array object and which King is array and we pass events as argument. And if it isn't we simply going to use this bus and because it's a view instance, we have access to the meat method and we can dispatch it with their events. And then the data and here have used to spread syntax to allow a terrible expression to expand into multiple arguments. So what we took here, we then expanding to separate arguments. Okay, so that's what we do when the are the first argument. The events isn't array, but what happens when it is in the race? Then we are going to simply use for lope with constant 1st 1 as index in events so this index will give us numerical index off the given event we are currently looking through. And here we go into the exactly same thing, this bus meat. Only this time we're going to use events and then the event by its index index. And again, we're going to use the spread off data to pass through a second Arguments to this meat made it the one last thing. Obviously, within this is a rain statement. We need Teoh heat return so that this statement doesn't go any feathers. He wants it in array. Just called this otherwise, you call this follow up now for the listen methods? We just going to copy everything and we're going to replace and meat with on because we listen to that given event and as a data data will be replaced with Colback. Now, as you can see, we have a lot of duplication. This statement he had this conditional statement. Then this fall, hope perhaps we could extract this whole logic into a separate methods and then just call it from within each of these methods separately. Okay, so I'm going to create the new method cold rapper, and this method will take events, then if not array and are there wise. So how will I want a cup? You one of the statements based it in sight of this rubber. And then if it's not a ray call, if not array. Otherwise we are going to call this otherwise gold box or other wise, and we pass index through as an argument. Now let's use this rapper within the fire and listen methods. So we going to go for this rapper and we pass events as first argument. Then we are passing a coal buck to this, actually is just copy what we have here. So we have this 1st 1 is for, if not array. So if it's not a ray, we're going to call this one. We can remove this block. That's what some economy. Otherwise we are going to call it with the index pastors and argument. And this son, we going to call this second statement with the event called Bites Index, and we can remove this follow up from here as well. Now I'm going to copy this inside statement basted inside off the listen methods. Now a meat is going to be changed with on and data will be changed to Colback so called back. There we go. And that's our event Bus completed. And now what we need to do is to register their It's within the bootstrap. We're going to start with import event bus from current directory, source core. And then we have this event bus and now we're going to go for window event. Bus equals new event bus. We don't need this brackets at the end. And now we can call this event bus globally to access fire and listen Method. If you'd like to find out more about the event type of the instance methods, you can find this information on view GS dealt orc on the instance methods events you'll find the on and meat as well as once and off. 7. Input validation rules: Let's now have a look at the validation. I would like my validation rules and messages to be directly associate ID with the input. And there will be two different methods that we're going to use. 1st 1 will have its validation attributes as an object. The other one will have it as an array. When we are going to use an object, the properties will represent the rules, whereas the values will represent the message associated with a given rule. When it fails, the other option will have just rules, and this one will be used when we will actually manually art validation to the HTML view off the form and the one using object will generate the validation messages directly from within the input component. So if you haven't yet out some validation rules with the messages Thea other input You can also aren't with some rules on Lee. An open our assets Js source components form inputs, inputs and our tax don't view farm. First thing we're going to do is art this validation property to our to the least of our properties. So after the l to complete a let's art validation and this one will be off the type. Either array of objects. Are we going to put them within the array, so array and object and all Because we are using array and object, the default value has to be returned as a function. So what are we going to do issues the auto function here and we are just going to return in the ray by default. The next thing we are going to do is to call the initialized method, which will create in just a moment after we've omitted the current value. So this initially a lies and now this method does not exist yet. So let's quickly audits within our methods section. So any lies. And here we're going to start with checking whether the validation property is empty and if it's empty, we're going to do anything else. So to do this, we are going to create a helper class under the core. Let's create a new file Cold Help of the GS and I was going to export default class helper , and this class will have to static methods, so 1st 1 will be called is empty and it will take some value and the other one will be also start IQ is object which will also take a value off some sort. Okay is empty. First, what we going to do here is check if Helper is object and we passed. This value through is an argument. Then what we do is return object. We want to get its keys and we passed the value our object in this case. And then we check if their length is equal zero, which would indicate the obviously the object doesn't have any properties and out would in return tell us that it is actually empty. And if it's not an object, then we return and I'm going to put in the brackets. If value ISS undefined than it's empty or value is equal, no, then it's empty or value. Its length equals zero, then it's also empty, so our is empty method is now completed. Now let's work on. This is object now to check. If it's an object, we are going to return value instance off object. But if their values instance of an object that can also be an instance of an array and we don't want this so we only checking for the actual object so we check in. If isn't Ray is Ray in our value as argument, so that will tell us whether the given value passed through is an argument is object is off the actual object type. OK, so that's our help. But it's now closed the file on before we are going to be able to use it within our initialize method. We need to import it to this file to our tax Don't view far. So let's use import helper from and we gonna go one directory up to directors up 34 core and then we have our help. So once we've imported this file, we can now use this help a class. Let's within the initialize. Start with the statement if helper is empty and we passed through this validation property as an argument, if it is empty, then we have nothing to do. So we just heat return. Now let's create a lead variable which will be called rules on associate our validation property with it because we will be over writing it and we will overwrite it when the validation is not in the race. So we check if isn't every is a ray den and we passing overseas validation station as an argument, and in that case, rules will equal object. Can we get just keys off this validation property? And now why am I doing this this way? Let's have a look at our view again. If it's an object, the rules will be represented by its properties. That's why we need to get the keys off it to get pretty much what we have in the second example here. So these will be our rules now. One important thing when we will have an object, then that means that we will display the validation messages from within this component. Otherwise we won't be doing this so because of this lets out the new data property here which will coal display validation and we'll set it by default to false. And if we scroll down now that we know in this case here that it's not in the ray and we will be displaying them, let's override this day the property this display validation and set it to true. So this way, our component now knows Yes, we will be displaying validation messages because the validation property has been sent through as an object with associated messages for each rule. Okay, so after this, what we're going to do next is we will use our globally registered event bus, which is great in the previous videos or event boss. And it's called the Method Fire. We want to inform our Rapinoe doubt our validation rules are as follow. So we going to call the event initialize hyphen, and we're going to concoct innate it with the group names of this group. If we associated group and name with this given component as well as the rapper on Rapper will be able to recognize the given input by the group. And the data sent together with this event will contain Field, which will represent the name property of our components and name, and Dan rules associated with this given inputs. So rules Okay, and now why we doing this this way? We are firing this event to the rapper rapper will capture that event and register all rules for the given input. This is because I want the validation to be performed actually from within the rapper rather than on the individual fields separately. Once the rapper has performed the validation and if there are any failed valuation rules. The errors will then be sent back to each individual input component and displayed accordingly. So one last thing we need to do is to register the listener on the robber after the data method, let's use that Created Created will be called before mounted. If you go to text that view, you see, we have mounted where we calling. This initialize method from mountain method is called ones. The virtual dome is ready and that happens after that created method has been called. So created is called before the mountain. That's why we going to register our listener from within the created. So it is ready. It's already listening by the time that the mountainous cold Okay, so we're going to start with event bus with the method. Listen and our event, the event that we are listened to is initialize with the hyphen and concatenation with a group name. So this group and we will delegate this event listener to the internal methods called initialized. This any share lies. Let's create methods, object literal, and here we can just not any sheer lies with data as an argument, and now we're going to check if exclamation mark this validation Buck doesn't have its own property. So has own property Data Field. If it doesn't have it yet than audit this validation Bach and we go for Data Field, which will other property with name off the input field and the rules will be its value. So data rules. So let's no re compile all the assets and PM Ron Death. And once everything has been compiled, it's open in my browser. One thing I can see straight away is that we have focused on both fields. That's where the focus girls into a 2nd 1 the last one that has a focus directive associated with it. So let's go back to the return on. I'm going to remove it from my view. As you can see, we have focus here, and we have focus here. Obviously, Browser doesn't know exactly which one it should take, so it takes the last one we remove this directive from. That's if we reload the page. There we go. Focus is within the first field. Let's have a look at the form rapper. Our former rapper has captured both off their fields with their validation rules, so our listener was working just fine. We check each individual text input. You can see our validation. Property here is set exactly as we pass it through. The same for the other one. It's an array. 1st 1 has it headed as an object. And our display validation is set to true on the 1st 1 whereas on the 2nd 1 is set to false because obviously it was in the race rather than an object. If you like to read more about the created and mounted methods of the components, you can check their view. Instance light cycle diagram on view. GE is the Orc. You will see the whole diagram How the component is actually being built on page loads created vacancies at this stage where his mouth it is a little bit lower down and at this point we have virtual dom ready for interaction 8. Validator class: before we can validate our input, we need to be able to some in the form at the moment. We don't have any means for that. So within our rapper don't view file within a template for our form talk. We are going to art, submit event with prevent event modify. And when we submit the form what we want to do, we want to call the submit method. Now, this prevent modify will make sure that the page does not real old and data is going to be processed internally by this component. Okay, within the methods lets out this sub methods so submit and what I would like to do from within the submarine method its first validated data. So this validate. And if all input is valued, then I would like to make a call. So this make Cole. Otherwise, I would like to catch the air and display the euro messages accordingly. So catch this. Cole failed. Now we've used three different methods here, as you can see, validate which we don't have yet We don't have this make call and we don't have this cold failed. So let's quickly on this regard to start with validate Jack Smith. It stops for the time being, make coal and cold failed, which will take the Aero as an argument. In order for us to be able to use then and Karch, we need to return at promise from within this validate method. So it's not with this return. New promise and promise takes two arguments. 1st 1 its resolve, which will be called when validation has succeeded. There are no errors. Otherwise, we are going to call reject. Let's quickly use the arrow function here and from within this new promise. Instance, we are first going to check whether we actually require validation in the first place. Because if our validation bag is empty, then obviously we don't have to validate anything. So let's do days this way if we're going to check if it isn't so. This requires validation, and that's going to be a method. We haven't got it. It's then we simply resolved this promise and we don't do anything else. So return after this, let's quickly out. This requires validation methods after the validate one and requires validation will just check if our validation back object has any properties. So return object. Let's get all its keys. So keys and we passed. The object won't want to obtain this keys from So this validation buck And then we check the length. How many off them there are. If there are more than zero, that means that we will require validation. Otherwise, we want After this will we are going to do is instant. She ate a new property, this aero, which will be the container for all our errors, our validation errors. And let's do this new error. We don't have this classy. It's let's first off this property to our Data properties section, so error and it's going to be by default new error. Now let's scroll up. And before we create this class, let's pass this era and submit methods to this lot. So they are also available within the view. We're going to start with error equals error so we can access all the error messages later on from within the slot and submit which will represent submit method so it can also trigger this. Submit methods with any buttons and so on. Okay, now, within the form directory of our components, let's create new directory called Valley Data Inside of this Valley data, we are going to create a new JavaScript file Cold air. Oh, and now are we going to do is type export default class error. And before we do anything else, let's import this class to our wrapper component. So import error from current directory we go for volley data and error. Now that we've imported, it's our idea automatically recognizes it as a volleyed entity. Okay, let's go back to our error class and we are going to start with a constructor Constructor will instance she ate the new property colt errors and by default, it's going to be an empty object. The next method we will need is the method that allows us to set all the years so set it will take errors as argument and will simply override this errors property by associating this argument with it. Then we will have a method that returns all errors. So all and let's use return. This errors methods don't will clear all errors so clear, and this will be this. Errors equals you object. As you can see, the same thing happens within a constructive when we actually instigating this, So why don't we just swap it with the cold to the clear method which will do exactly same thing now, after the clear, we also need to have a method that checks where their form has any errors, forgiven field and possibly even the rule for that field. So has methods it will take field and rule, which will be option also by default will set it to know. Now we're going to start with there. Constant called has property and we're going to check this by going through this. Paris has owned property and the property name will be stored within this field argument. So now we check if rule is no. Which means the second argument hasn't been provided. Then return has property if we have the field within our areas collection and that means that there obviously is a validation error fault is given field. Otherwise, we need to not only check whether it has a property, but also the rule. So return has property, but also this errors and we check field. So we have the property off these errors equals rule. In other words, is the value associated with this property with represented by the field equal to the given rules. So has it got the property? And is the value associated with this property equal to the given room? OK, so that's our error class. Let's just save and close it now, going back to our rapidly view after we've instance she hated this aero property. Let's now call new Validator, to which we will pass instance off itself off this rapper. And then we're going to pass, resolve and reject coal box to it. Now we don't have to validate. And so let's quickly created under the Validated Directory. So we're gonna go for now, the JavaScript file volley data. And now let's quickly import it as well right after this era. So it's going to be import validator from current Derek Directory, Valley Data and Valley Data semicolon India. And if we scroll down now doubts without any highlight. So it's available. Let's quickly export default a class validator, and we're going to start in The constructor Constructed takes the instance off the rapids, so let's call it Rapper, and then it takes resolve Kobach, as well as the reject one from more than a constructor. We're going to start by instant, she ating a few properties this fields, which will be represented by rapper Fields. Then we're going to have this validation Bach again represented by robbers Validation Buck . And then we're going to create internal errors. Property by default is going to be an empty object. The next thing we want to do is to run through all the validation back properties and make sure that whichever one is being currently looked through has a value which is actually much in the validation rule for a given input within this Fields collection. So let's start with a promise again, this song. We're going to use all methods, which means that all promises which we are going to pass, the reason argument have to be resolved before we go to their then method. And the same goes for the couch, if any of thes coal box from within the old method, any of these promises has been rejected. Then at D end off all of these ones they being resolved or rejected, we will call this catch method. Okay, so for all we are going to pass the collection off the promises as well. So let's use this promises and let's create this method so promises and this method will simply start. We will simply start with that voluble called promises, which will be an empty array to start with. And then we're going to go for the follow up, let field in this validation back, and we're going to go for promises. Push. We're adding to this array, this validate method, which would create in just a moment on we pass in the field that we want to validate. And that will return the promise, obviously adding it to this promises array. And at the end we return this array altogether. Now let's just aren't methods stuff for this validate method. So volley dates and it takes field, and it's just quickly returned New promise, which takes resolve and reject. And for the time being, we are going to leave it like this. Let's go back to a constructor now. If all input has been valid, then all we need to do is to resolve this promise. Otherwise, we are going to catch the error, and here we are going to use the rapper and its internal error property. If we go back to the robber, you can see we've instance hated this era class here and on this class, we're going to use set method by passing their collected errors. Associate it with this internal heiress property which we've instituted here. And after this we're going to reject the promise bypassing message with the actual air sent through as an arguments to this catch method. Now, this reject will stop the execution off the form. So anything after this promise which is this method here, that then method will not be called. We will, however, catch this arrow because we are rejecting. So when we are rejecting the catch method is being called. When we are resolving, then this then method is being called, in other words, our errors. If we have any errors and validation, errors will then be dealt with by this coal failed Colback methods. If you'd like to learn more about the promise subject which we've used during his video navigated developer adult Mozilla Orrick said for the promise and on the left hand side you will find the least of all available methods you can use with the instance off this object 9. Validate method: let's continue with our value data class and validate method within the promise. We are going to start by declaring three constants are constant and I'm going to put them all on new lines. So 1st 1 would be rules and we are going to pull rules from the validation back. So it's going to be this validation back, and we need to get them using the index, which is represented by the field names. So field. Then the next one will be rules count, which will tell us how many rules there are forgiven field. And here we're going to use rules and simply length property. And the last constant will be the value which will obtain using get value method, which will create in just a moment. So this get value and we passed field as an argument. Okay, so before we do anything else after the validate method, let's create this gets value one. So get value and it's sakes field as an argument. And within this method we are going to start by returning field and then we're going to split this field using full stop. Now why we do in this? It is because some off the field. Names will have the following formats. Address a town, for instance. So address will in this case, be representing the array off items town pulse, cult line one, line two and so on. So now we're splitting the name off this field and we will have an array. So, for instance, for our address town, we would get something like address and then town as the next item in this rape. So now that we split it and we have an array available, we're going to use reduce methods, so reduce and reduce takes two arguments. 1st 1 is a function So which will take two arguments are cume you later is the 1st 1 and the other one's current value. No current value will be represented by DE I'd them through which we are currently iterating. Obviously this is going to return array and with each off these items, we going to get different current value. And the second argument to this method is going to be a value that will be passed through at this callback function. As a first argument the first time around, whatever we're going to put here, this accumulator will equal toe. So, in other words, case we're going to use fields, properties of this fields and from within this callback function, we're going to return accumulates Ah, and the current value which will be representing the given index off this accumulator. Let me demonstrate in another file what's actually going to be happening with each iteration. So when we summoned the form, the fields will be represented by the field name and the associative value. When we go into having the ray, we will have the index again. And then the value will be represented by the object like, for instance, town postcode and so on. Now, when we pass the field for the validation, it will be represented by the string in this case to get town off the address array. We will have it as address. Full stop, Tom. So this is why we are splitting the field here. Using this full stop, this will give us and the rate so address Tom splitting by full stop will return array off address in town. Now, with each off these items when we reducing, we are looking through each item off this race the first time we go into half address as the current value. Second time around, we're going to have town with the first iteration. The current value will be the address. An accumulator will be whatever the fields contained In this case, we will have index first name. Then we're going to have index address with the object. And what this return method will return is their value off this address because obviously the first kind values address We are getting address from this object which will be represented by accumulator. And we're getting this obviously using this card value. So what we going to get from this first iteration is going to be this object? In other words, what we have here for the address. So the next time around, with the second iteration, the accumulator will contain this object. So with the second iteration, when the kind value is town having the accumulator as this object which sound impulse coat what it will return using this accumulator and current value, it will be the value associate it with the index town which is London back in our Valley data class. Within the validate method after the declaration of the constant, let's start looking through the rules or four let index in rows, and first, we're going to check it free already haven't got and ever forgiven fields. So if exclamation mark this errors has on property and we passed field as argument, if we don't have it yet, then let's first split the rules by Colon because some rules may have something like minimum, for instance, one. Then we're going to split itself. Then there's going to be a rule. And then there will be arguments for the given rule. So we are going to create two variables. Let's and we put them in the race of rule programs equals rules. And then we get the index through which we are currently loping and then split split it, using Colin Symbol. So this will always return a race. Sometimes sperms will obviously be undefined, but we always going to have a role. For instance, if we have required, then when we split with the color and will return just rules. But poems will be undefined. Okay, then we are going to a use try and catch statement for Couch. We're going to catch error and we'll do the card statement just a moment first before that we are going to check if and we don't have this classy it. But let's just pretend we do exclamation mark rule any We will be looking for the method by rule name. So rule which we've obtained from our split here. So rule name will represent the method. And then we are going to pass two arguments to this callback function The methods on this rule object which we don't have yet we will pass value and then para arms again, which has have been obtained by using display, eat and corn again. Sometimes this parents will be just undefined. Some rules will only take violet value and will evaluate the value without using any additional problems. So if the rule has failed, then we need to other to our errors This errors, we going to use field name equals And which rule did it fail for? So rule associative value for for this given errors index And after this we need to obviously reject because this validation has felt so reject. And we're going to say your input waas invalid now sometimes we might, by mistake put the role which does not exist on this rule object. When that happens, this statement here, well, throw an error. That's why we trying to catch it. And if that happens from within the catch, what we going to do is rejected as well. Using message, invalid form, validation rule and let's provide their rule name. So we know which one does not exist. And then that's just finished this reject statement. So what happens here? We are looking through all the rules for the given field. We are splitting each rule using this color because they will be multiple one. Some of them may have some parameters that we need. Then we within the try statement we check in on these objects rule for a method with the name off their rule. We passing value and para meters are additional parameters. Sometimes this may be defined and if this returns false, which means validation felt then we are going to art this field to the errors with their rule, associate it and then we obviously rejected saying I was letting no death, our promise all here, that one off this fields the one that we've currently have currently bean, a loping through has felt because we rejected it in which case the Scots statement will be executed rather than this. Then with the result, one last thing we need to do from within our follow up after this. If statement, let's check if we are looking through the last item in this rules array. So if and we go into your sperm interject, we're going to use index plus one because index starts with zero within the array and we are trying to compare it to the length off the rules array. So rules count. If it equals, it's identical in this case, then we're going to resolve it. We're going to resolve it because this means that unless one off this reject coal box has been called, then everything is fine. The input is valued so we can resolve it and tell our promise all that for this field, we have a valid input. Now are valid data classes completed about. We need to import this role class, which we don't have yet before we do this, let's just quickly create this file under the validator directories, so it's going to be called a rule and let's leave it for now. Let's just imported quickly, right above this expert default class or import rule from, And it's from a current directors of full stop for a slush rule. So now this is going to be available within the validator again, Saving closes fire from within the rule. That's just expert default class rule. And let's live it for now. We will deal with this class in the next video. If you would like to learn more about the reduce method off the array object navigates to developer adult Mozilla dot work, where you'll find a full documentation for this method. 10. Validation rules: the first validation rule will check with the value is not empty and will be represented by the keyword required hands. Our method name will also have the same name, so static required and we will take value and now going back to validate a close just to show you once again. So this is what we call in this methods have grown, will represent the keyword required, so that's going to represent the method required on their role class and it will take value . Parnham's will never be provided with the required validation. Soap arms will not go into this method at all. Okay, so what we need to do here is to check whether the value passed through has any value, whether it's not an empty string, no or anything like that. So what we're going to do is to use our help, a class which have created Allium. Let's just quickly important right to the top of this file so helper from and is going to be three levels up core and then help a class and Sammy Cahn all those validation rules and methods they should return true when the field has their correct value. Otherwise, they should return. False. So here we're going to use return statement and we check whether the value is not empty. So, helper, starting with the exclamation mark, obviously is empty end, then the value. So if the value was empty, it will return false. Otherwise it will return. True, which will tell us down to their field has a correct value. Okay, No, most off the other methods, most of the other validation rules will only apply if there is a value in the field. So what we want to do is to create a help. A method called validates, if not empty. So static volley dates, if not empty, and it will take value and a callback function. So Cole Buck and here we're going to check if and then help her again is empty, and we pass values an argument, then return true. Otherwise, return Kobach and set off brackets to indicate that we actually executing the Colbert faction. The next method will check for a minimum number of characters in a string on the minimal number off items in your A or properties in the object. The method will be called mean. Am I Ansel static m i n and we take value and parents. Now this sign paradigms will be represented by a number because our rule will be sent in the following way. I m I n colon and in part meters. So for instance, three me more three characters or three items in year eight and so on. Okay, so set of curly brackets and we first check if type off our value is string. So if our value is off a string type then we return and we use this helper method we created area We need to use a class name because we are using static methods off validate if not empty value And in the callback function, which is where we are actually checking whether the length off this value is more equal to whatever we have with the part within the parts. So return and regards ago value dot length is more equals parents now, otherwise we simply return object. We get its keys from that value and in the length which will represent number off items in the array, all number of properties off the given object, and again if it's more equals. Walt caroms half associated with it. Okay, now, once again, going through this because of this might be a little bit confusing. We may have sometimes rules where we won't require the field. But if there is a value, we want to check for a minimum number of characters. And this is why. If it's string, then we will simply Onley run it when there is a value. If there is no value, then required, a rule should take care of it already. So if there is no value than obviously required will return error unless their field is optional. If there won't be required associate with the field, then we want around this minimum rule at all. But that's only for the string. If it's in the ray on object, we always check whether the field has the required minimum number off items in your A or the properties in the object. OK, so that's our minimum method. Next one will be maximum, so static marks and the same approaches before value and parents and we are going to start with exactly same thing. So what? I'm going to do this. Copy this entire block from it within the minimum. The only difference now will be. We are checking for less or equal rather than mall equal and the same for the object length . So that's our maximum rule. Then we going to have an email one so static email and this one we only take value and with email if we just start by returning rule again and we only going to run it if value is not empty. So we passed values argument and then our Kobach function. And here what we're going to do is first create a part in constants or constant Parton and this Spartan we are going to copy from If we open our project and open the read me file, you'll see we have to reggae axis here, one for email, the other one for passport. So let's copy this one for email and paste it. And now what we need to do is to return. We're going to use our Parton and then test against the value sent through as an argument. So this is our email Parton. If you want to check change this reggae X two and yada regs that checks for email, then obviously feel free to modify this. However, however, you feel relevant. Okay, so that's email rule. Then we're going to have say, password grows were also static password and again just values an argument. And again, we're going to return. Ah, rule with the validate if not empty, We only want to validate it. Value is provided. And here we're going to use constant as well with Patton Parton. This time will be this other one from a read me file. And again, you can change it to however you like it to be, and then the same thing Return Parton test against the volume. So it needs to much this rag X and after password, we are going to have method with will check. It will usually be ah, used with check boxes which may return yes, on number 10 true falls and so on. Eso static a method called accepted. We are going to call it and value as an argument and then return and we're going to use the array. We put a few values, so may have Yes, it may have on it may have in Did you want it may have string one. It may have true bullion as well, and we need to check. If this array includes the value that we are being passed, there is an argument. If this value is within this array, then return true. Otherwise returns false. And the last rule that we are going to argue in this course is going to be checking whether the value is in a given set off items which will be separated by comma so static in and we're going to have value and then parents. Now this specific rule will be pastor. Is this in? And let's say one, 235 Onley These numbers of elite everything else is involved. So parents will represent this string separated by comma. So again return. We're going to use the rule validates, if not empty value and then we have a Colback return. We have AARP Arum's We're going to split them because we want to create in the ray. They will be separated by commas, a string comma and then mop method, which will have item is an argument, and what we want to do is make sure that this item extreme if there's any space in between at the end of the beginning, they want to trim it, So item trim and this is method, Saw said of rockets. And then we're going to check if in this array off trimmed items if we include the one that represents the value. But I want to turn it two strings to string. And the reason why we want to turn it to string is because even if we pass through something like this in one to again, these spaces will be trimmed using this mop method here and say, for these are Inter Jess. But they will be when using splits all of the valleys, including numbers that will be turned into a string. That's what we need to turn our value to string in case we passing an interject. So we need to turn into a string because we going to be comparing to an array off strings. And again if you would like to learn more about the native methods that we've used you in this video, you can navigate to developer adult Mozilla Orc and search for string prototypes pleats, which is one of the methods that we've used. Then we also used regs, test methods and down we have object keys as well 11. Input wrapper: now that our rule classes completed sleds quickly compile all the files. So NPM, Bron, death and once everything has been compiled less open our at itself open our main index dot blades. What we need to do is to art this submit button, and we're going to Arctic ride after this field sent. So we gotta go for button and it's going to be off. The type submits, and it's art class button to it, and with then we are going to have I with the class first far check F A f W. This is just going to give us a Nikon from the phone, Elsom and then sub meat for the label. We now save it and prevue everything in a browser reloaded. And there we go. So if I know Open View Council and Salik the form dropper, let's have a look at the errors. Were we going to have? If I submit now, nothing's going to be added because we don't have required for these fields. Eso Let's just aren't one item and there you go. You can see the minimum rule has been triggered. The same will happen for their last name. And if we go March, we come out modern 30 characters because if we go back to our editor, you'll see that are only and specified the marks land for nine. So let's just change this to actually 30 This way. Any user that is using the interface will not be able to go over 30 anyway. Okay, so old, that's fine. Now, one thing if we go back going to refresh it, check our input. Obviously, at the moment we don't have any reference to our errors. So we have errors within the rapper. But we are not passing these errors to the inputs to display any sort of validation. So the next thing we're going to do if we go back to the editor a next thing what we we are going to do is to pass and thes errors to our inputs. So error equals on and it's going to be props era and the same goes for the other field. So now we need to add this era property to our input. So let's go inputs, input, text and right to the bottom. After the validation. Let's art error, and this one is going to be of the type object and because it's an object that default value needs to return a function and it's going to be new air. Instance. And again, my I d should automatically imported and it did. I'm just going to move it up because I like this imports organized by length. So now that we have this era available within their text input, let's go re compile everything again. So N p n Ron death. So no farms have been re compile. Let's go back to our browser. And if we refresh everything, check our text input. You can see we have error entry with the air's Let's now try and validate the form. Some just putting one here and one here that should give us errors. And there we go the same way as we have within a form rapper. If we open our air's the same input is now available from within. Our input text input component back in the eighties are inside of our text input component . Let's add a few more properties. The next property I'm going to art and actually this one is going to be right after the group is going to be label and is going to represent the label for our input type will be string and it won't be required. Some imports we may not need label for So the required it will be false and then scrolling down to the bottom after the arrow We're going to art visible flak. Sometimes we we may want to hide the input. When the from first loads perhaps some sort of event later on, we're gonna be able to trigger which will show it, hide it and so on, so visible type will be bullion and by default we are going to set it to true. So by default the input will be shown. So let's no stray away putting to use We are going to aren't data property called show and by default it will take value associate with this property So the Z born There we go. And now if you scroll up, let's wrap our input within the dif and this dif if I just close it Yeah, this dif will have the show directive which will only show this input when the show property is set to true. Okay, lets curled down after the visible the next one I'm going to art. The next few properties I'm going toe art will allow us to style the input. And this and the rapid is the around the input. So let's say the next property will be called import CS s class. If you are using different frameworks, let's say for the back end and for the front and you may have both strap on the back end to you may have the foundation in front and and classes associated with these inputs are different. So that's why you having this property will allow us to obviously specify what class the input should have with their foundation. We don't actually use any classes, too. Style the imports, whereas with bootstrap, you do so this option will alive. It's already started however you want. Okay, so we going to have it off the type string and that required flack will be set to false because it's going to be option. Also false. Then we are going to have validation CSS class and before we actually do this, this is actually going to be the same. So there's just copy this string and required false about this input CSS class. We can also apply straight away. So let's go for this input and after out a complete class and input CSS class. Okay, this property validation CS discuss will later on be pass through to another component which will create in the following video called Validation. This one will actually take care of displaying the validation message. The next property will be for the wrapper wrapper. CS s class and again, rapper with two peas. There we go. And again, it's exactly same thing String and false for required. Then we will have another rapper, but this time error CSS class. So when there's air for this import, what class should be applied to the rapper and again type string? But now, rather than required false, we're going to set a default to involved because we have already styling inside of our sauce file for this particular purpose. Okay, then we're going to have rappa C s s style. So if we want to apply any in line styling, we can also do this and again, this is going to be our string and false or it's just copy this and the last one will be rapper error CSS style and the same thing string and false. Let's not create a few computed properties. 1st 1 will be called is in Volleyed. So we know whether the validation has failed for this given input. And this one will return this error and then has this name. So if within the errors collection we have era for this particular inputs name than that means this input is involved, the next one will be show validation and this one will return. This is invalid without brackets because it's a computed property. And then this display validation because we only want to display validation when we actually wanted to be displayed. And we obviously if you may remember here from within the initialized if the input is not an array, if it's an object, and that means that we actually displaying valuation going back to our end explains, you'll see that this top one will display validation. Where is this one? Because it's has array for the validation property will not. So we will have to manually aren't validation messages. The component will create later on art above this tax import. Okay, so this is show validation. The next one will be called computed Validation. CS s class and this one will return Object which will have the validation CSS class free. Scroll up this validation. See, assess class as the property which will represent the class name. So because it's an internal property, we need to wrap it with in within the array. So this validation CSS class. So this will actually return whatever is associated with this property as a key and then the value it will only be displayed if this is involved. If our input is involved, So display this validation CSS class on Lee. When this input is involved, the next computer property is going to be called computed rapper C S s class and this will be applied to this dif surrounding the input. And here we are going to return an array. The first item will be often object type. And this son, we're going to use this rapper error CSS class. This class will be applied to the given element when this imposes again invalid. But we will also want to apply this robber C s s class which is going to be always applied to the rapid regardless of whether the input is involved or not. Obviously this will only be applied to the given element If this property has any value, because by default they all sets to false and the last property we're going to art journeys Video will be computed robber CS s style and this one went apply any inland signing that we might want to apply to the wrapper off this component. So return again array, and we're going to go for the object. It will return this rapper Aargh CSS style This time when this input is involved and we will also apply any other styling doubt, we might want to apply to this rapper where there are no words day but is invalid. So this robber C s s style. Now, if we save it, let's scroll up and actually apply this to our robbers or we have for the class property we're going to use Computed robber, CSS class and for style computed robber CSS style. If you would like to learn more about the computed properties off view GS navigates of Eugene's dot or search for computer properties and watches, or click on the computer properties and watches on the left hand side to access the documentation 12. Validation message component: in this video, We're going to killed our validation components on the devalued data Direct. Sure, we're going to create a new fire called validation Don't view. And inside of this fine, we're going to strike, Start with the template. And then after that, we going to script section as well, which exports default, object, literal. And we going to have some properties here. So props, the 1st 1 will be label which will be off there type string, and it will be optional. So required said to false. Now, just so you know, you could also do it the following way. I'm just going to create here label string just like this if it's optional, But I like to be more strict, so I always put required false stating that it's actually optional. Okay, then we go into half the I d. Now which is off the type string as well, and it's going to be required sort of quiet set to true. Then we are going to have name which will be type string as well. And this one will also be the quiet den will have show property which will be of the time Boolean and by default, it will be false. Show property will tell us whether the valuation should be shown. In other words, if we have an error for the given input, then we're going to have CSS class, which will be off the type Array might be object or in my as well be string. That's why in your it and we will have it required as false, it's optional. Then we are going to have validation, which will have all the validation messages. So type it's going to be either array or object and down we are going to have default value because it's in the ray on object. He needs to be a function so equals and return. Are we going to return rate this sign by default? Then we're going to have error instance off the the errors, so type it's going to be object and default. It will be instance off the new heiress on you error by default. And that should now be important. Yes, at the top Here, There we go. We have her automatically important if your I d doesn't do it, obviously make sure the important it's from within the same directory. So just a the same directory. Okay, error. And that's all properties for our validation component. Let's now try and build a template for it. So we are going to start with the label. Everything is going to be happening with indie label and we're going to have for property, which will take I d property from our component. Then we will also only show it's V if and we're going to create a computer property just a second called show label Now, when would we show the labor we would show the label when we have a label property specified or if there are arrows to be shown? So let's create this computer property after props. Let's create a new one computed and that's an object leader or we're going to start show label. And he always simply returned this label. If this label is an empty and all this show is set to true, so if any of this is true, then show the label the content off the label. We're going to start with the spun, and it's going to be shown V if label. If we have label provided, then we want to show this label. V text will be what we have actually associated with the label property. So that's our label. And then after this, we're going to have our validation spun with a class validation dot comes from their satisfies. They'll come with with the exercise files and then we are only going to show it if we have show property sets to true. In other words, if there are any errors and here we're going to create another spot and this one will have quite a few property. So I'm just going to put them on new lines. Their first property we're going to have is the class, and it's going to be the C. S s class which were passing through as a property, then V four and we are going to use the message and rule in validation. So now where this is going to come from, As you can see, we have this validation property here, and if we open our index top plate, you'll see we have violation property, which we will also pass through to this validation components. So we will have role and a message. The message is, the value and role is an index. So we have a rule for the index message for the message for the value. So we are looking through all these and then the show. We only show this when show Keramat method. Which way? Well, are there just a second? We possible rule as an argument. So let's quickly create this method after the computers were going to create methods. And here we have to show error and we take rule. And here we just going to check return. This error has this name. So this input with this name for the given draw rule and we need to split it by Colon because some rules may have colon and obviously and properties associated with it. And we want zero index, which is before the column, Whatever's before the car. So if we have something like me anymore, Missy three, then what we going to do? Bice. It's not supplies. It's actually split. We're going to split it. That's going to be an array. There's the index zero. We return minimum. This M I N and Index one would return three, which is the props. So this will give us minimum or whatever other rule there is. And this has if we just go back to our error. You can see the has takes field, which is basically input name, and then the rule is optional. If there is a role, it will also check if their role equals whatever we passing through. Okay, so show era now is applied to do it as well. Let's now go for their loss. A directive which will be vey text. And this one will just be the message that needs to be displayed when the validation folders given input and rule has failed. No, Before we go, I just want to change one thing here. This validation we returning array. We don't need this curly brackets around the weaken. Just return theory, and this return statement can go as well. So just like this is fine. Okay, Now, if we save it and close it, let's open our text. Don't view. What we need to do now is imported to this file. So we're going to do import validation from, and we important is it. Guards goes to levels up, and then we have volley data and validation. And now what we need to do is to art this component to this specific one so components and we are making use off. The following components are object and it's going to be validation. That's how we going to call it and then validation bicycle instance off the component which we import it. Okay, so now to use it, what we going to do after the opening dif talk, we're going to create a slot. And now, while we are creating a slot because sometimes you may want to put something else above the input rather than validation and then put the validation directly in the views of, for instance, above this field, we can have the validation component here and then put something above the input in between the opening and closing tax imports. So this gives us a little bit more flexibility again. Okay, so within this lot were going to do this validation and how this validation has quite a few properties. As you may remember, 1st 1 will be the label which will come from the label property off this component. Next one will be I D, which comes from the data. The property identity. Next one will be name again. Property off the same component name. Then we have show and we want to only show it if show validation computed property returns True CSS class, which will be computed validation CSS class again computer property we've created in the previous video. Then we have validation, which we pass through as well, validation, which is the property off this component. And then the aero. Exactly same thing era, which is the property we passed through to this text component. Let's no registers components within our components. The GS file. If we open it, let's call it validation and we are going to pull it from volley data. Validation of you. Okay, save it. Let's open our terminal and let's run and PM Ron Death. And once everything has compiled, we can open a browser, we heat refreshing and submit a busy. Nothing happens because we don't have required rule on the fields. If we put just a single Harter, you can see that the 1st 1 displays the validation. Sure, where a 2nd 1 only gets the highlight because we don't have a label for it. So if we go back to the editor and the first thing I'm going to do if I just close this text view under the index. The blade. Let's art this required rules. So we're going to art required on Let's say, Please provide your first name, then I'm also going to aren't the label for this field. So label will be first name colon and star symbol to indicate it's a mandatory field placeholder we can remove in this case because it doesn't make much sense. Having label and a placeholder and the same thing for this other field is going to have a label which will be last name. And let's remove the placeholder we are going to are the required to the validation, erase or re quiet. And let's now aren't this validation component above this second field so validation? And here we go in half label, which will be last name. Actually, this label we can remove because we don't have validation there, so it's not going to be displayed anyway. Label. And then we're going to have i D, which is last name. Then we are going to have named the same thing. Last name. Then we have a show. Show it on Lee when props errors has last name. If there is a validation message for the last name within the years. If the input was involved, then show it. Then we have validation, which will be very seeming lots of what we have with the first name. So I'm just going to copy oldest and just change the first message toe. Please provide your last name. Then we also need to pass the era. So props air If we save it all and previewed in the browser Refresh hopes something's wrong . Just quickly. Check cannot be. Property has off undefined. So if we go back to the editor, what have we done here? Has errors? It's era. No errors. Okay, save it. Providing a browser. If we hit Refresh Now you can see the required validation. Rule kicks in. It sells the provide. Please provide your first name. Please provide your last name. If we know, put just one character. This will change to the other validation rule. And so our validation displaying within the form already works. But you can see we don't see this dialogue at the top telling us that the input was involved. Now these Dalek is a chapter of its own and we will start with it in the following video 13. Alert and warning: an instructor. We're going to start working on a top dialer component under the components director. Let's create a new one called Dialogues and Let's create a new component file called Top Die Look Adult View Extension. And here again, we're going to start with the Template and Dan a script section from within the script. We going to export default object literal, and we are going to leave it like this For now. Let's start with the template here. We're going to have a diff with the I. D top dialogue we already have, starting within the South Files and then we are going to apply the class to it, which will come from a computer property. And this computer property will be called rapper Class. What we are going to create, then, is a dif with the class dialogue and another class alert, and this will also have a class property. This one will be visible class, and this is a method which will create in just a moment, and we need to pass the argument which is colored for the specific one. And then we are going to have a message associated with this stocks off the html in this case because it may contain HTML tax message, which will be one of the properties. And then on click, we will wants to clear this dialogue. And now that we have it old, it's just duplicate all this. The other one will have, rather than alert, will have a warnings, a warning class and in the argument of the visible class. Okay, Now let's start with our object here. So we are going to take properties, and the only property that we will take is going to be called Session Die. Look, and this property will be off the type object, and by default, it will return an empty object. So turn and the object. Okay, that's the only property we're going to have here. Then we're going to have data properties. So data method returning the object. We're going to start with the i D. By default. No, we're going to have type by default. Nola's Well, then we're going to have a message which by default, will be an empty string. And lastly, we going to have a time out property. I said to know by default as well, then we're going to have those computed property, so computers and we will only have to computer properties one ISS iss visible where the dialect should be shown at all. And this will be based on their fact whether the message is not empty, so it's not an empty string. If there is a message to dollars should be shown. Then we have rapper class, which we are applying to this top dialect. If and here. What we're going to return is an object with the class over lay, which will apply distended background to the entire window. And this will only be displayed when this is visible when the dollar is actually visible. And it also has to be over. Given types of this type this method, we create this method in just a moment, and he needs to be confirmations Akon from. And it's a confirmation because all these other dialogues, like, say, alert a warning is going to be displayed. Just when we saved the form of is we don't need to provide the tinted Bagram for these sort of things, that's all. It's just when we have a confirmation with yes, no buttons. So these our computers, our properties, let's now create this type is method, so methods and here we're going to start with type ISS and we provide the type as an argument. And here we are going to say is return this type triple equal time. So if type marches what our type property has associated with it, then that is their type. We actually passing through is an argument. Okay, what else have we got here? Let's have a look at this visible class, so methods as well visible class and it's going to be a type argument, and we will return an object with a class active when this is visible again and this type is and the type is an argument. So if the type marches, if it's an alert art, the class active to it otherwise of its warning are the active to this one and active with basic displayed, the relevant defended the relevant die look within this main top dialogue section. The next method we need to create is this clear method which we're using here on click Soul . It's clear. Create this one as well clear, and the clear method will take date argument, which will be optional so we can set it to know by default and for the time being we are going to leave this clear method like this. After the computed properties, we are going to art created method. So when the component has been created, what we want to do is set a few listeners event bar, Soliz nous or event bass. Don't listen and I need to remove this important because my idea automatically adds its side just for a moment because it's globally registered component eso event bus Listen and we go for clear top dialogue. Well, this one will do its coldest clear method. Then we're going to have another listener which will be top alert. So top alert and this one will call the Method Alert event will create this method in just a moment. Let's just of this stuff for the time being so alert event and then we are going to have another one top warning which will have warning event. And again it's the method stopped for the time being and the last one we going to register will be top confirm and this one will be confirmed event. Okay, so let's start with this alert event with the alleged event. The first thing we are going to do is to add the data property to it. And first of all, we're going to do clear this clear. So I want to clear any dollars that's currently showing if there is any. Then we're going to associate this I d with data I d. So ever day ties coming through as an argument whether we are sending with this ah, event needs to contain i d Then this type which will be type of which this in this case is going to be alert. Then we are going to have this message which will come from a data as well sent with the events of data message. And then we're going to call the method called Count Down. And this is because we want this dialogue to disappear after a certain amount of time. So lets out this countdown method and it's countdown methods. What we going to have here is simply this time out property which have added earlier so with data properties set time out. And that's going to take a function which will clear the dialects of this clear after how many seconds, let's say seven seconds was 7000 milliseconds. So that's what we want to happen once this dialogue shows up. Because when we associate message with this message property this in return will return true, for this is visible which will show the dialogue enough to the seven seconds it will clear the dollar removing the message so the dollar will disappear. OK, so that's our alert, an event method. Now what we are going to do within the warning event is very similar. So it rather than copying the scout, what I'm going to do is create a new method called Alert and it will take data and it will take type. And from here, I'm just going to copy everything that I just psyched into this alert event. And rather than having type as a text, I'm just going to use the argument here and from within the alert event. Now, what I can do is called this alert past data and just the types or alert. And now I can use the same approach for there for the warning event data which used to be passed. There is an argument, and then, rather than alerts, is going to be warning the confirmed event method is slightly different. We will pass the date up, but we will deal with this method a little bit later on. Let's no go back to our clear method for the first thing I want to do when I'm clearing the data is to clear the countdown to make sure that we actually closing it when we call this method. So this clear count down. We don't have this method yet, so it's quickly audits. So after the clear, let's get this clear countdown. What's going to happen here is First of all, we're going to check if the time out property actually has any value. So if this time out triple equal, no. So if it's no, then we don't have to do anything, so just return. Otherwise, what we are going to do is use clear time out function and passed instance off this time out. After these, the only other thing we have to do is to make sure that time out is equal in all again, a case of Bach to our clear methods Here. We need to now set this type Bachtel and this message back to an empty string and after this. I'm going to dispatch the events event bass. Ah, fire this I D plus and let's call this event cleared and we are going to also past data, which is center is an argument. And if there isn't anything, let's just pass an empty object. So anyone who's listening to this for this event after the dollar has been cleared, they can do whatever they need to do. Okay, if we now save it all. And let's art, it's over, components. So right at the top I'm going to do before our form robber separated load of it and what I'm going to do here. Call it Top dialogue and it comes from within. Components, dialogues, top dialogue. So that's now registered. What we can do now is go to the views, open our template and within the up blade before the closing D for the I d up. What? We are going to do this at this, the components or top dialogue, and we might remember that we have this additional property session dialect. So it's our this session dialogue here, and it's going to be an object. The object will start with Collins session dialogue and what we're going to do here is I'm going because we're using blades. I'm going to pass the valuable session dialogue and if it doesn't exist, just pass an empty object. But it needs to be a strength. So it's just positive like this now to act on this Shinde, I look, we need to ransom functionality tower components that top dialogue again after the created , we are going to up mount it methods. So once the component has been mountains and Dom is available than what we are going to do is check first if object keys and we going for this session dialogue and in length If it has any land which means there are properties, then what? We want to set a time out and function which will be executed after half a seconds off 500 merely seconds. And what we going to do this event bus again? Ah, boss. And we're going to fire the event this session dialogue dot type because this session delivery was should contain type and the message as well, which will half I d off session and let's go culminated with this session dialogue type and then we're going to have message, which will be this session dialogue, adult message. Now let's compile all the files and see how it works, Actually, on page load. So if we go back to the terminal and PM wrong, deaf and once everything has come piled, let's go back to the editor. Let's open up. And we got for the http controllers and we are the main controller. What I'm going to do here is aren't the very able to their view so with and is going to be session dialogue, So it will corresponds to this variable here. This is what it's going to contain and what I want here is new collection, and I'm using illuminate collection here, which will convert the array to Jason when it's Bean returned. Within the view, you can also do just that Jason and coat and just put your a year, but that I'm going to it because thes tools are at my disposal. So type will be our top other it and the message I want to display will be initial dialogue . Load it, for instance. Okay, if we now save it and previewed in a browser, refresh the page and there we go. Initial Diallo that if I click on it, it disappears, as you can see, as soon as I click on it. It girls using this clear method. Okay, if we want to change it to the other, let's say Red color, which is top warning. Let's just change the type to top warning. Let's reload the page. And there we go. It's on the red background for Let's Go back to the editor and removable. We've just added, We don't need this dollar compay. Jalabert, Let's save and close this file. If you would like to learn more about the methods used during his video set, Simon and clear time outs can be found a developer, adult Muzi Little Orc, by searching for window or work a global scope mixing 14. Error handler: in this video, we're going to create a simple error handler, which will give us a nice and easy interface to dispatch events to the top dialogue and show the messages from whichever component we want to under the core directory. Let's create a new JavaScript files. It's going to be called error Handler, and from here we're going to export default class called error handling. Our error handler will have to static methods. 1st 1 will be called show error, and it will take two arguments. 1st 1 will be the error and the other will be before Cold Buck by default. The 2nd 1 will be sets to know. Now we will check first if type off before Colback is function. If it's a function, where we want to do is just call it so before Cole back with a set of brackets and Sammy Cahn. After this, we will check if our error has the property response. And if this response property has the property data and if it does, then we are going to use air handler. We need to use a class name again because we're using static methods. We will call the Method Cult air or di look, and it will take our error message. So error response data and data will contain our message in this case. And then we simply return to make sure that the execution of this method is Terminators. Then we're going to check for another scenario. If error has a message property, then we go into the exactly same thing. But rather than datum, it's the response data message. We will just pass through air message. Otherwise we simply log our error to the council's console lock air. Now let's create this aero dialogue methods stuff, thick error dialogue method. It will take a message and some sort of I d By default, we're going to set to request fail. Yeah, and were we going to do here? I simply use our event bus to dispatch method dispatch the event. So fire top warning. The errors will always be on this bread backgrounds atop warning type for this dialogue and with the i D. Which is the second argument, so I d. And then we passed message as a message now because the properties and values they're associating with these properties and much the naming, which means that my messages message ideas I d. We can shorten this a lot of it and just put it on one line so we don't have to actually used the assignment for this, that colon. We can just put the variables directly, and it will equal to exactly same thing. So let's save and close our error handling. No. The next thing we need to do is open our bootstrap and let's register our air handlers. So we are going to import Aero 100 lor from gun source, corps and air from left. And now we're going to register it as a global air handler on the window objects or air handler equals on. It's going to be just air hundreds static. It's all off. The methods are stacked. Think there is no constructor so we can registered like this. Okay, now, if we save it and close it, the next thing we can do is now go to other components, open our form rapper and let's goto a cold, failed methods and what we are going to do from within this method is a use. This air handler on Glor and Den called show error method, passing the error as an argument. So if we now save it and let's re compile all the assets, so NPM run deaf once everything has re compiled, let's kill to the browser. Refresh the page, heat submit with empty fields and irregular. Our dialect is showing right. It's up off the seven seconds it should disappear. So there we go. And if we put another involved import, a different message will show up above the field. About that's up will show the same message, obviously, and we go. If you click on it, it disappears. And just to show you where this is actually coming from, if we open a value data and validate a class, you'll see that what happens when we actually validate the input we are rejecting with the given message. This was the message that actually was shown in the dialogue when we rejected. Then the catch method will catch the air that's been rejected, and this will then be rejected, fed up with the object and the message index, which contains this error message now going back to our event hunger. This is the scenario which is actually going to work for this particular case because we're going to have era with them. Message index. Now, this 1st 1 will be used with the Ajax skulls. When we are going to be is using access to make the call to the servant in the response going to be received, we're going to have it in a fallen four months is going to have arrow response data. Within data will be anything that we actually send from the PHP cold or any other service side coat to back to the JavaScript. So the message will be one of the index's that I'm going to send back from within the method of a given controller. 15. Confirmation dialog: let's not have a look at the confirmation dialog. We are going to start with dif with the class dialogue and this time we are going to associate confirm class with it. We're gonna go for class as well visible class and the type this time is going to be confirmed. Then we are going to have inside of this thief paragraph with the HTML for our message. So what message is going to be displayed in the paragraph inside of this leaf? And then we're going to have a small navigation with yes and no buttons. Both of these battens will be represented by Spahn talks with class small button. Then we're going to use V if directive to Onley show this about this 1st 1 when we are not processing the request. So exclamation mark and pro said Singh property, which we are going to aren't to our data properties. So let's quickly added after the time out, pro seen by default false and we will also apply click event to this button and when we click, we will wants to call the method which you don't have yet on which will be called Make coal . Let's just quickly. Art methods stop for this one. So after old, these methods let's create the make coal. Let's scroll up. And for this button, we will have. Yes, let's no duplicate this baton. Remove the exclamation mark because this button I want to be shown when their coal is being processed. Let's are disabled to the class and let's remove the the event binding here, and we are going to replace this label with their the icons. It's going to be I Class F A s F air of a spinner and f a spin. So it's rotating and an f a f W de was a most space. And then another button air, which is going to be buttoned with label no so spun class small this time success button. So it's going to give us a green button, and this button will have a click event which will call clear method and no for the label. So here we've got three buttons. These two will only show one of the time. So before we click Yes, button, this 1st 1 will be shown once we've collected. Then we will said this processing to true, at which point this one is going to be hidden and it will reveal this one with the spinning icon. And no, when we click on this button will clear the dialogue. Okay, so let's now go to our data properties. We need to add a few new properties here. After the message we are going, Teoh Art, you are l lower case, which by default, will be no. Then we're going to update a property which will be an empty object and methods type which by default, will be get. This is when we going to be making an Ajax request. And I think that's everything for the time being. Okay, Now let's go down to our way. Ah, confirm event method. Now here. We've got our data as the argument First of all we wanted was to clear any existing dollars If there's any dialogue and we've clicked the button all and er the trigger to show the confirmation. Delic, first of all, we want to clear the existing Dolich if there's any so this clear, that's the first thing we need to do. After this, we're going to associate this. I d equals data. I d. Then we're going to have this type equals confirm. Then we go into half. This message equals data message. Next, We're going to check if data has u R L property. And if it does, then we're going to associate it with our internal data property. What? L so this u r l data you are l. Then we are going to check else. So if data has data property and if it does again same situation, this data equals data data. And after this, the last one is going to be if data method Dan, this method type equals data method, but we are going to convert it to lower case or to lower case to ensure that our request methods are lower case. So if we have get polls put, parch, everything else is going to be in lower case. OK, so that's our confirm event finished. Let's no update our clear methods after the message. We also need to clear now days you are l converting this to just know then this data setting it to an empty object this methods time which will become get again and then this processing equals false. Okay? No. If we scroll down to our new method make coal. What's going to happen here is, first of all, we're going to set this processing property to true. So when we click this year's button and we call this make coal method than processing, it will get set to true. And this spinning icon will replace this year's bottom to indicate that we are processing the request. Now we're going to check if this u R l if we have you are l within the request, then that means that we are supposed to make an agent request. But this is something for later on else. What we are going to do is we are going to call this success method and let's quickly create this one going to scroll up a little bit success. And this success method will take the response as an argument because it will also be used with our Ajax request. And here we are just going to go for event bass and we are going to fire the event with this i, d Conn coordinated with hyphen and colt. So whoever's listening for this event will receive the following data response, which will be what we actually go into. Pastor is an argument. So response and then die lock, which will be the instance off this stop dialogue components. So this. Okay, So what's going to happen now? I'm going to show you, actually, how we can use this confirmation dialog to submit our form. But before we summit, we going to see this confirmation message. I show you want to submit the form? Yes. And if you click, he has, Then the form is going to be submitted to validation will kick in. Otherwise, if I click no, then form will not be submitted and no validation will be treated. Okay, so this is just an exercise. I'm going to open this up the G s file. I'm going to duplicate this first line, commented for the time being, because we're going to get back to it later on. And I'm going to art mounted method yet. And then we are also going to have methods where I'm going to specify the trigger methods and this trigger methods. If we just open our views and then main index dot blade, I'm just going to arts quickly a button here, type Barton with class Barton, and that's just aren't click event to it, which will call this trigger method on Let's just say trigger if we go back. So from within this trigger method, what I'm going to do is call event bass and we're going to fight the event called Top Confirm. So it's going to trigger this confirmation dialect. And what we are going to send through as arguments is going to be an object with the I D. Ah test button and message, which will say testing event handling. And I think that's fine. Okay, from within the mounted. Now, when we will trigger this event, let's just go to our top die. Look, I'm going to close the file browser and let's split the view here. So when I'm going to cold his methods top confirm this will trigger this confirm event method, and the conference event method will do all those things that we've just done. So if first of all what it will clear any existing dialogue that might be still visible, then it will associate their values from within. The data object with the properties and wants old. These are populated, obviously, because the message will be visible. Duck will show the dialogue with Yes and no buttons. And then what's going to happen when we click on the years Barton we will call this make coal method they're processing was to be set to true. And then we are going to call this success because we will not be sending you are l. That's what We'll go straight away to the success method, which in return will coal will fire the event called Whatever idea we've passed through, which is this test button with hyphen cold. So now we need Sue. Listen to this event event bus and let's listen to the event called Test button with hyphen cult. And once this event is triggered, then we're going to get the response. Let's use the function here again, and what we're going to do is do response di look, and then we go for clear method. And for this clear methods, we are going to pass the arguments to it. Which success Key said too true. Now, dialogue is representing the instance off this whole component so that we can actually call this clear method on it. So if we scroll up that will in return at the end, coal, another event so this will dispatch the event again with the same I d just button hyphen cleared. Now another event. I'm just going to duplicate this one and rename it so there's button cleared. And here what? I'm going to do its first check if isn't response success. So if it doesn't contain this index success and it isn't set to true, then we just returned. We don't want to do anything else from within. This listener otherwise will be going to this event. Bass and I want to fire the event. Submit update for now. What's going to happen now if we open our form and and rapper and I'm going to open the sinner the other window. So now we need to actually register the listener for this event. So duplicate this 1st 1 this event listener from within the created method. And here we're looking for submit and then we're going to be looking for the group. And if we go back to our edit form, you see update form. Is the group off for this specific forms? So we have some it update from now, this listener will listen for this summit update from and when this event occurs. What we want to do is submit the form. So let's just call this summit and methods when that event is being triggered. Okay, let's now are compile everything. So NPM Ron deaf. All that's not compile. Let's go to the browser. Refresh the page. We have two Spartan. If you click on the button that shows the confirmation dollars perfectly, can know. Nothing happens if I click again and click. Yes, that submits the form you can see. The form has been submitted, the validation has kicked in, and the top dialogue has also shown up. Now another thing. If I click submit, the same thing will happen. So when I would like to do in this situation is when I'm using the external trigger. I would like to disable the button for the form. I would like to disable the submission of the form, and here's how we can do it if we go back to the editor. What we can do now if we if we go back to our wrapper, let's art another property to our wrapper component after the behavior. Let's art the property called event sub meat on Lee, and this one will be off the type bullion and default will be false. By default, we want to be able to submit form with the submit button or with the return when we actually hit, enter on the keyboard within the field. So if we scroll down to the submit method, first thing we're going to do here is check if this event submit, only then we just return. Otherwise we're going to call another method and I'm going to create this method. He s o submit event, and what I'm going to do is move this this valley date, then and catch to the summit event. So from within the sub. But now we're going to call this event submit event. So if it's event only submission, then that means there when we click on a button to stand a button or if we heat return where when our courses within the field, then that will not work. Then we just return and we won't be something in the form. But if this flag is set to false, which is by default, Dan, we still will be executed. Submit event. Now, if we scroll up from this even listening here for the submit. We're going to changes to rather than submit. We going to change it to submit event so it needs to call this Summit event method. Okay, now, if we save it again, let's re compile everything. And once that's done, let's go back to the editor. Actually, because we want them we need to do is go back to our form and are Disney property. So our form Roberts So it's going to be a bullion. So Colin, at the beginning event submit Onley equals true if we know, save it and review it in the browser. Refresh if I know, click on something. But nothing happens if I enter anything or just hit return within the field. Nothing happens either. But when I click on the street about and click Yes, there we go about their form has been submitted. We have the validation message as well. Okay, so now we've If we go back to the editor, let's remove this event summit only because that's not quite what we wanted. This was just an exercise for now to show you how this can actually work. Let's go back to our lab Js. Let's remove all of this and that's UN comment what we had originally here. But as you know now, you have an extra option which you can use with your form. If you ever need to submit form with a confirmation message, then it's that. 16. AjaxCaller mixin: In this episode, we are going to create an Ajax color mixing Ajax color will be used to make any Ajax coals to the server under the Source directory. Let's creating yuan specifically for the makes things make sings and within this directory , gone to creates that you want called Ajax Color Adult View and here we're going to start with the script expert default and the object. And here we started the properties. So props we're going to start with the action, which will be off the time string and default value off adjusted for its lush pointing to the home page. And then methods and method will be off the type string and default value will be post. So by default we will be making a request using a post viable then a data properties and return an object which will have only one processing set to falls by default. After this, we're going to have computed properties so computed and we will also have only one here. End point, which will return this action and obviously from any classes that will use this mixing, will be able to override this endpoint if we need to point somewhere else. OK, now it's time for methods and here we're going to start with make Ajax Coal and this method will take two arguments. Success, Colback and Def Elia Colback. And we're going to start by calling the method internal method this start processing Ajax cold. We don't eat any arguments for this. Let's create this methods quickly. And this method, what it will do is simply set processing property too True. And also what were going to do is create another methods us which is start processing Ajax Cole event and this method will be empty by default. But it will l hours to the override this method from any other class. And if we need to trigger an event when we start processing the Ajax cult, doubt will allow us to do it. So this start processing Ajax school event then because we have a start, we also need to have the at the end. So we're going to start and processing actually stop is going to be better. Stop, start and stop processing Ajax cold and from here will be going to this This processing sets to false and the same way as with the start, we're going to have a stop processing Ajax call event. Let's create this method as well. And again this one will be empty, even a method without any body. But it will allow us to override it from any other class. Okay, so make Ajax Co, we have start and stop. Then the next thing we're going to do is call another method that this make Ajax request and this method to dismiss it. We're going to just pass those two arguments that we've been given so success and failure. But the method itself this make Ajax request will if we just created right underneath, take a few more arguments of success. Kobach failure cold buck down. We also going to have data. You are l and method. This one will be able to overwrite any properties that we've been given natively to this mixing eso if we need to make an Ajax two different Ajax calls from a single component one based on the standard action and method properties which have been attached to the component and the other perhaps using completely different data. You are our methods. Then we can obviously override this by using this. Make Ajax request method. Okay, so here we're going to say, create a very able first. So let request data, which will be an object, will start with you R l which will be u R L. Argument. If it's available, use it. Otherwise, use this and point computed property. Next, we're gonna go from methods and methods I'm going to put up with then that brackets method , if it's developed, was an argument otherwise used this method property, and we need to convert it to lower case. So to lower case after this, we're going to have problems by default. It's going to be an empty object and data also an empty object by default. Now are we going to do is check if and an array boast boots and patch includes and we go for our request, data and methods property. If this array contains the method, Doubt has been passed through as an argument, our associate it as a property, then that means that we are going to use request data and we're going to set our data s data, which is sent through as an argument all simply this request data method and let's just create this method so that we can actually override this method from any other class that uses this mixing and by default requires data will just return an empty object. So either the data we passing through as an argument or just use whatever is coming out of this request, date or method. So if it's posed boots or part, it's going to be the data property. Otherwise, if it's get for instance, it's going to be request data. And this time we're going to overwrite para arms, and that's going to be the same thing. Data all this request data and after oldest. Now that we are ready, our request data is ready. We can make an Ajax skull so ox ius it's registered globally. If we go back to a bootstrap, you may remember we have access registered on the window object. So Oxy s request and we go for request data as an argument and then Cole success Gold buck . If everything's fine and catch any errors with failure. Colback OK, so now let's use it within our top dialogue component. That's open components, dialogues and top dialogue. First of all, we need to import it above the expert default close so imports I Jack's a Kohler from and we gonna go to levels up mix ings and Ajax Colin. And then after before our props, we're going to add mix, sings property with the array And then we put our Ajax color there and come on the end. Okay, Next thing if we scroll down to our data properties now that we are using this Ajax color which has this processing property, we can remove this one from our data properties. That's no longer need it. If we scroll down a let's go down to our where make coal methods note from here. What we going to do again? Is this process in true? Now we can use the cold to this start processing processing Ajax coal because if we just go back, start processing ages called sets this processing to true and calls the methods cold start processing Ajax coal event, which is empty. If we wanted to trigger an event, we could have this method here and just put whatever else we would like to trigger when we started the request. Okay, so from this if statement, if this has u r l, that means we want to perform at the age of school. So this make Ajax request and here we're going to provide a few arguments. This success Goldbach when their methods, when the cold by has been successful, then this failure, which we don't have yet let's quickly out The method stops of failure, and this one will take care as an argument s So that was the second Goldberg dance. The second argument. Then we have this data and this u R l and this method type k cynical in the end of the skull. Now let's go and create this failure methods. So from within the failure, first of all this stop processing Ajax skull. First of all, because we want to make sure that processing property set to false, then we have. If error has a response property, then we go for error equals and that's greed. The message here. Error code. Wherever Eric Old will space off, plus error response status, property and then concocting eight in this away within the brackets, let's just space here within the brackets. We're going to go for error response and status text that's coming from the Axis response and co Contin ated with the closing bracket, so that's going to be on every message. If it doesn't have responded in, Elle's error will simply equal error message property. And lastly, let's call this warning event and it's past the object with I d being this I d and then just curl up a little bit message which will be desarrollo Okay. And if we scroll lab, let's just see if we have anywhere else this processing manually. Sad if I just check up here for the clear Methodius we have still disposing false. Let's use this method. Call which waas This'll stop processing Ajax school. Okay, so that's all good. Now let's open our after GS and again Same as in previous video. I'm going to come duplicate this line come into the 1st 1 because we're going to get back to it. And now we're going to do another exercise again. We're going to have methods and methods will be called Trigger and from within this tree get where we going to do issues? Event bass to fire an event called top confirm. And here we're going to pass an object. This Simon's going to have I d off test Barton with that message sets to testing event handler and then you are eldest son we're going to send to home this year and point doesn't really exist. Method. It's going to be posed and daytime. We're going to set to say test true. Okay, let's open our index blades and let's are this button again? So a button type button with class Barton and then on click Let's call this trigger method trigger. Let's now re compile all of the assets. So npm wrong, deaf and let's not open browser. Refresh the page again. We have this trigger button. If you click on that button, I click on No. For the time being, let's open the console. Let's see what's going to happen. Actually, network top. Let's trig aids. So yes, and there we go there. Call has been made. You can see the year Eric hold for for not found. We click on that. You'll see. We've send it to them the end point that we that we've specified this for its lush home with the post method and with the data test. Sure, exactly what we put within our request. So we go back. Let's just clean up a little bits. Now let's from off this button again we don't need it tells just a test saving close it. Let's reverse oldest back to what it waas and we can now close it. We can close stop dialect, which is now complete as well. Now, with the Age X column thinking that this request dates, I could probably do better if it was a computer properties or let's cut this and paste it into the computer profit properties again. We can overwrite it from any other class that will be using this mixing. And now, obviously, if we scroll down this request data rather than calling it as a method, let's call it as a computing property by removing those brackets at the end. You know, if we save it and close its and we can move to the next year 17. Behaviour class: So without validation and tub dialer completed, we can apply our Ajax color to our form rubber. Let's open a rapid file and right before this export default, we're going to import how a Ajax Kohler from and is going to go to levels up mix ings and Ajax color. Now we need to make sure that this mixing is available. So we use mixing is property. And within the array, we put this instance off the the Ajax color. Okay, now, if we scroll down to our where make coal methods because this is what's going to be triggered once all validation has passed and the first thing we're going to do here is to clear any outstanding talk dialects. If there's any top dollar showing at the moment, we need to clear at first event boss fire event called clear Top Dialogue, and that will hide any dialogues that might be still showing. Then we're going to make our age X skulls of this make a jack skull, and the method for the successful coal will be called coal success full and for the failure will be this call failed. We don't have our called successful method. Yeah, NSA. Let's quickly create it for the time being. Let's just leave it as a method stop and for our cold failed, which we already have. And what I want to do is stop processing. Because when we make in this Ajax call, if we just open this Ajax cola, you'll see we start processing Ajax color. What it does is basically sets. It sets this processing flock to true. When it stops, it sets it to false. So what I want to do is to make sure not when before we actually show any air, we know that the response has been sent back from the server. I want to stop this processing. So this stop processing Ajax cult. That's what I want to send as a cold back in looking back at the show aerial. See the coal buckets being called before anything else is being processed from within this air handler. Okay, so now, inside of their coal successful, what I want to do is used to try and catch statements So couch and it will catch an error and we will catch the era. Don't will represent the method that does not exist on the instance off another object that we will create in just a moment. So what I'm going to do when we get this era is to display the error message. So error handler and we go into a show era and you're a will have a message saying involved from behavior. And after this we are also going to stop processing Ajax calls on this stop processing Ajax Co. Now within the try block. What I'm going to do is to use the new object called behavior a new class, rather. And then we're going to call the method specified by the property behavior. And let's just curl up quickly. The regard is our method. It's with you, depending on where you are. You my abusing v i o r v i o u r I'm using the i o u R So I just need to obviously correct this and then we're going to pass this instance or instance of this form rapid as well as the response that we are going to receive from the server. And let's just pass this response actually here as an argument. So response. There we go now. One thing about this we may specify our behavior for scroll up to the top. You'll see our behavior is optional. Oh, we may actually return the behavior from the server with the response because sometimes you may have behavior says dynamically, depending on what sort of data yourself meeting you may want to reload the page. You may want to redirect the user so you don't necessarily know up front what sort of behavior you want deformed to perform after the successful submission. So what we going to do is check if this behavior is available that this behavior, then it is, uh, behavior. Otherwise, we are going to get the behavior from the responsible response data we need to access and then behavior property on this response. Okay, now we don't have this behavior, obviously yet. So let's quickly save this file and scroll up to the top. We're going to import it behavior import behavior from, and it's going to be from the current directory. And if I will be called behavior as well. So under the form directory, let's create a new JavaScript file called Behavior. And here what we're going to start with is going to be expert default class behavior and we are going to have just fall static methods to start with. You can add as many as you want later on, depending on what sort of behavior you expect the form to perform static. 1st 1 will be confirmed with dialogue and reset which, uh, we set that we go which will display the confirmation dialog and reset the form so form and then response as there is the second argument. Yeah, What? I'm going to start with the issues form and call Stop processing Ajax Co. Then I want to reset the forms off form reset method which we don't have yet. So let's quickly open our wrapper. And after our initialized, let's just quickly aren't the method stop preset and that's going to be it for now. We will work on the implementation a little bit later on. So if we saved this a buck to our behavior class and here after this off, the oldest has been done. What we want to do is display their dialogue. So event bus fire and we going for top alert with the stop alert. We sent an object saying that the I d will be formed group. We're going to use for this and message will come from the response. So response, data message. So that's our first methods for his behavior. Then the next one will be simple Redirect so static, redirect And it will also take form in response. And we're going to use window object, a location on it and then a tree. If property will set Teoh response data and with the response we are going to get the U. R L where we want to actually redirect they use, the next one will be reload. Sometimes you got to reload the page so static reload. This one won't take any arguments, even though we are going to be technically passing these arguments to each call on off any method on this class. But we don't need anything, so we're just not gonna put anything here window location and just reload with True, to make sure we get the fresh copy of a page now, sometimes you may want different did nothing after submission. So let's create a method for this static again. It's going to be called sleep, and we will take the instance off the form. What's going to happen? The only thing we're going to do it basically stopped browsing Ajax skull. So form stop processing Ajax school. And that's all the methods that I'm going to be creating here. But again, if you want anything else about them, make should obviously the form, that's what you want it to do. So we can now save and close this file a one last thing within the rapper. We still haven't added the computer property request data so computed. And here we go into the method called request data, which will return whatever we want to send with the request. And we will take this fields because they will contain all the data that we want to submit to the saver. Okay, Now, if we save everything and re compile the assets and npm Iran, def. And once everything has compiled its go back to our editor because on what I want to show you is first of all, if we go toe up http controllers and open our main controller, you'll see that I've already prepared there methods to handle our requests. Now, if we are running really test, I don't want to sleep for three seconds. But if we are submitting the form at the moment just to show the processing functionality. I've set it to sleep for three seconds so you can see the baton processing and that sort of things. Obviously, we don't have this functionality yet, but this will be added later on. So we sleep for three seconds and then we returned the response in adjacent former with behavior. Specify this confirmed with dialogue and reset, and the message will be. Your request has been processed successfully, so without actually adding anything to our form. If we just open our views, then Maine and index adult blade or PHP, we won't be adding any behavior to it. It should take the behavior from the response. So let's open our browser and it's give it a try. So let's refresh the page and let's open the console. We only are interested in Ajax girls, so it's just selling this X Age are on the network top. If we heat summit without feeling anything and you can see no Ajax skull has been made, let's know, fill it in and kids submit and we did make a cold, but we still get the era for 22 stands for unprofitable entity, which means some errors in the input. And as you can see, we've got quite a few, because when I prepare the exercise fans for this course, I've already put all of the fields that we will later on arts to this form. So I need to comment quite a few off those validation rules. Let's go back to the editor. Let's open our store Main request request file. If we go to our we have controls, there we go. Requests are here and storming requests is this one we don't have titled among We only have first name and last name. So let's comment. These other ones so titling everything after last name also can be commended. Save it and let's try and say something different right now and we go the responds. There we go. Your request has been processed successfully. So the delicates there we don't reset the form yet because reset is only a stop method in moment doesn't have any implementation, but you can see the response from a service came exactly as we set it. So now let's try and remove this response from within the controller. Let's just commended for now, and let's change it to. Actually, Wanda is specified as a property on the form rubber. So it's going to be behaviour. And let's say we want to redirect Use a summit story direct. We want this sort of behavior. And now, obviously because we are using redirect, we need so with the response, provide the u R L when we want the user to be redirected. So you Arnell property and we are going to send them to http, as as his theme tutorials dot com. Okay, save it buck too. The browser. Let's refresh lit again. Feeling old data sub meat and after three seconds weights. We should get the response and be redirected to SST victorious. Okay, so let's no do some clean up before we wrap up. Let's just remove this u R l and enable this behaviour in the response we can save and close this file. I'm going to leave this request like this for the time being. When we are thesis fields Later on, we going toe re enable this validation A on the romper. There's nothing else for the time being. And here let's remove this behavior No one thing. You may have probably noticed is that the form has submitted the request to the servant knowing which route to take which endpoint should it some in the form to even though we didn't specify this and this is because this specific form to access this main controller is actually going through the route, which is the same as the help it. So without any thing in this lock, Okay, If we open our roots and web dot PHP, you'll see this is the end point. So it's just a for its lush after the remaining of the toe access this storm it it on the main control. Now, that's not always going to be a case, of course. So what we need to do if we open our form robber, You know that we are now using this Ajax color. So let's open this A just call in, see what it has. It has the action property. It was specified, the action property. This is where the request is going to be sent. So let's art this action property to our from rabbits or action and that specify strictly that we want to send this request to roots and you're in a lot of Americans wrote Helper and specially wanted to go to main store. So now we strictly know that this is where we want it to be sent because that's not always going to be a guest. We not going to have just one route fall all the requests. And now if we try the same thing again, we should just go back to our form. And if we open the council again just to see what it goes, let's just feel it in Click on subject. Now we're back to the dialogue. Obviously, you can see the form has been submitted to their same route, so it's still for it slash after May name and we have the dollar copies displayed after a few seconds and disappears so everything works as expected. So we are now ready to move to next video 18. Reset and clear: So now it's gonna look at the reset methods we've created stop for in a previous video. So what we want to happen when we reset the form first of all, is to clear all the error messages. So this error and clear method next, we want to clear any dialogue that might be still showing. So event bass fire event called clear Top Die Look. And after this, what we want to do is trigger another event. So event bass fire and this event will be called reset hyphen form. And we are going to Concord in a tit with the hyphen as well and then the name of the groups of this group. So we know which form group does this reset? Refer to no. Apart from the resets, we will also have a clear method. Now reset will reset the form to its previous state, which means if there are any fields pre populated, the data that was originally in the form will replace what we've actually typed in. But sometimes you want to clear the form completely, so you don't want any data. So even if the form has loaded with some data, you want these fields to be empty. So for this purpose, we are going to create a clear method and clear methods will do pretty much the same. Walt, the reset us. The only difference will be the name off the loss event. So in order to make it little bit better design wise, we are going to create a new method called Cleans. And we will pass the name off the event as an argument to it. And what I'm going to do now is Skopje actually cut everything from the reset method and replace the name off this last event that we are triggering with the name that comes through as an argument. And now what we can do is from within their set called This cleans and the name of the event will be reset. Hyphen form cleans with E. And I'm going to copy this and pace in the clear this time rather reset, is going to be clear for so now we have it old centralized with this clings methods and every time we receipt, resets or clear, this method for answers in this case is going to be clear form in the name off. The group will be treated okay. Now these events will be triggered. But something needs to listen to this events in order to clear our inputs. So now let's open our inputs, inputs and text. And if we scroll down to the mounted methods, there we go. We are going to make a coal to another internal method called registered business. So register, least nurse and let's create this method. So after our initialized new method called register lawlessness and from here what I'm going to do issues event bus to listen to those meth to those events that we actually try again from within the rapper Listen and it's going to be reset, form, hyphen and then concatenation with a group name again. And when this event is going to be triggered, then I want to call our internal reset methods. So this reset. We will create this method in just a moment. Now let's duplicate this and do the same for their clear so clear and clear. And let's now create both of these methods. So reset and from within the reset method when I'm going to do is use this meat methods which we've created earlier, and the volume going to be sending is going to be that this current value Karen's Valley because Karen values the value that the input actually loads with. It's not what we actually type into the input. It's world has been provided as the value to be displayed when the form phrase loads Now for the clear method. What we want to do is the same thing. So we a meeting event about this sign with an empty string because we won't step field to be empty. Okay, now we can save it. And let's re compile the assets. So N. P M Ron deaf and let's not privy everything Eyebrows. First, the page feeling some data hit. Submit that after a few seconds we should see the die look. And as you can see, the form has been cleared. Now let's out some data to the form when it form for his load. So let's open our views main and indexed blades. Let's go for the first name and say current value equals bastion. That should stay in the form when we, for some in the form for it. So let's just reload the form you can see that is already there and Let's just change it to Joe Doe. And if ice click on Submit doubt should reverse to Sebastian and empty field for the last name. And there we go. You can see the reset works. Fine. Okay, let's go back. Now. We have this clear method, but we don't have a behavior for it. So what we can do if we open our behavior file? Let's a What I'm going to do is click create another static method court, confirm with dialogue and clear, and it also takes form and response. And he I'm going to start the same way. So I'm going to start with the processing Ajax Coal. And after this what? I'm going to this form. And this time we're going to use clear methods and we will use the same dialogue, the same confirmation dark. So I'm going to cut it and I'm going to create another method static, a method cold confirm, and from within this method, we're going to call days fire this event. So formers, argument and response as the 2nd 1 and no, we can use it. So let's use behavior confirm and we passed form and response and the same applies to this clear method as well. Okay, and now we have an extra behavior. Actually, with this confirm can also be called So we can only say display the confirmation message without clearing the form as well. Because now that we have it developed as well as a static method on this behavior class, we can also use it as a behavior for the form. So let's try and use this confirm with dialogue and clear. And if we open our index plaids and this are we going to override what comes from them? Response. So the behavior let's go confirmed with Dalek and clear. So now if I refresh this page, actually we need to re compile the assets. So let's go back to the terminal NPM rob deaf. And now, if we previewed in the browser, refresh the page Now if we feel that in, that should clear up completely. So if we some meat, a few seconds dialogue and the empathy for their radio and everything seems to be working fine, OK, we are not ready to move the next via 19. Buttons: in a previous video, We've implemented reset and clear methods for our form as well as updated the behavior class with the methods that make use off these. In this video, we're going to have a look at how we can also trigger these methods using form batons. The first thing we need to do is to have these battens thes methods enabled on our slot. So before the submit, we are going to also pass reset with the reset methods as well as clear with the clear method. What we also need to pass through is the processing flak, which is available on this Ajax color class. If we go here, you'll see we have this processing that's going to be useful in order to show the processing baton basically replacing the standard submit with the processing disabled button indicating that the former's candy being processed. So let's pass this as well, so produce sing pros to sing and for the time being, doubts going to be it. So let's move to our views. Let's go to the main open our index dot blade, and the first thing I want to do is to replace this button with a collection off three buttons. But rather than putting them directly within this view, we are going to create an include file. So we start with include and it's going to come from within the Views directory. Then it's going to go to the template bar shells, and the fall is going to be that. So we're going to start with templates. Bar shells and foul will be called form hyphen buttons hyphen attached because we're going to have another one which will be detached for buttons which will be outside off the phone . So let's copy, Name off this file and create this file under the partials. So I knew. And it's going to be blade far form buttons Ivan attached. And if you are no using the same sort of I d. The only thing you have to aren't is basically dot blade dot PHP to the end of this file, okay? And from here, what I'm going to do is start with their standard dif with a class greed Exxon musings er foundation again structure html structure entirely up to you if using something different. I'm just going to use what I what I'm using here. So I'm going to polls this video create destruction. Then I'm going to explain what I did, so have no added my buttons. The 1st 1 is for the sub meat and it will only show while the form isn't being processed. The other one is to replace it when the form is processing. We going to see this processing with the spinning icon and this one will be hidden at that point. Then, once the form has been processed and the response has been received from back from a server than this one will be hidden, this one will show. Then we have the resets and clear as well, which will call the reset and clear method when they are clicked. Now, obviously, if we try and reviewed in a browser right now, nothing's gonna work because obviously we haven't re compiled our assets after adding these three new properties do this lot. So let's quickly go to the terminal and Ron npm Ron deaf. And once everything has re compiled, let's go to browse a refresh and you can see we have three in your bat mitzvah. I click on submit that summits the form If I click reset that clears old years and we have whatever we loaded the form with. If we click on clear, that clears the form completely. If I keep on some and you can see and then reset, you can see everything automatically disappears when I click this button, soak, submit and clear the same thing. This is because we're clearing these notifications. If we go back to our editor, then you'll see that if we scroll down when we are calling this resetting clear, this cleans method is being called and this one clears all the errors. So the year messages, as well as this red board around the import, disappears. Then we also cleared the top dialogue right before firing the event. So at one last thing that I want to do here is from within the created. I'm also going to provide to listening for every setting clear methods so duplicate this last one twice and rather than initialize, this one is going to be for the reset and the other one is going to be for the clear method . Well, this will allow us to do is to have external triggers like buttons outside of the form, a component which, when triggered, could reset or clear this form input by firing one of these events 20. Disabler: Sometimes you may come across the situation where you need to disable either the entire form or just a single imports batons and so on. In this video, we going to have a look at the way how we can achieve this, because this is going to be shared functionality across multiple components. We are going to create a new mixing specifically for this purpose. So under the mix things we are going to create a new fire, Cold days, a blur adult view. And from here we are going to start with the script talk and export default and object literal. Here, we're going to start with the properties, so props and the only property that we're going to require is going to be disabled. And this one will be of the time bullion and it will default to falsify default. Any off the elements dot is using this mixing will not be disabled. Okay, then we're going to have some internal data, so data methods returning an object and a property will be called ISS disabled by default, it will equate to whatever we've been given. So this disabled after this thing Onley to methods which we're going to have here will be enabled, which will simply 10. This is disabled two false and disable, which will tenet to True. So this is the Zabel said, too true, and that soul within our mixing cannot save in. Close this file. Now let's open our wrapper that view and import this dissembler into our form. Robert. So after the error, the error let's put import. Dee's a blur from, and it's going to be mixing some mix things, and he's a blur Now. It's hard. It's our mix things Dee's abler, and now we have these two methods, as well as the properties available within our form. Robert. Now, if we scroll to the created, I'm going to art to newly Snus this some it's going to be for the disable started. And when that happens, I want to call method disabled and then disable. End it. We are going to call enable method. This way of any external trigger needs to disable the form they will be able to. Now let's art mount it method as well. So once the dome is ready, what we want to do is to check if this is disabled than what I want to do is to fire one of these events. So event bus fire disable started and then we are going to con coordinate it with this group as well. And also, we don't need to pass any object as a second argument to this one. This is just the event. Just inform anyone who's within this group that is listening for this disable started that they can do whatever they need to to disable their given components elements. Okay, so that's from the mounted. Now, another thing you may remember from within their the Ajax color. We've created those empty methods start processing Ajax event Ah, Jack school event and stop processing aged school event. And this is where we actually going to implement them. So going back to the rapper after their the mounted we have methods. So the first method here will be start processing Ajax cold event. And what's going to happen here is event bus fire disable started and again concatenation this with the group. Why am I doing this when I submit the form, I want to let's say, disable certain elements if we have external triggers, which outside of the form rapper then these buttons I would like to disable. Let's say submit. Button wants you something. The form. You don't want the summit button to be enabled to result in the same form straight after you want to disable it and only enable it when we get the response back from a seven. So that's why we are going to disable it here, using this event and then stop grossing Ajax Cole event will do the opposite. I mean, it's going to call, obviously again the event. I'm just going to copy this, but this time it's going to be ended. So disable ended with the group name. Now. One other thing I want to do when I'm actually disabling there form. I would like to make sure that any notifications like top dialogue and any error messages on the phone are disappearing. Stray away. We don't want to have disabled for with all those warnings, and so so in order to do that because our default disable method does not supported what we going to do is over right over right. It actually on this rubber component. So I'm going to start with disable method, which we already have available because off the disabled, and now we're going to overwrite it. First of all, what I'm going to do is make sure that I'm calling actually the parent disable method so disabling we're going to go for methods. And the method called that We want to call this cold disable, but we need to use coal method and passed instance off itself to make sure that we had tree gained this given method on the disabled. Now, before this, however, I want to clear older notifications. And as you can remember, we have this cleans methods which also triggers the event which we don't need in this case . But we we want to do what these 1st 2 lines are doing. So what I'm going to do is extract these two lines to a new method called clear notifications. So clear, No notifications, Notifications. There we go and we paste it in here and then we can call this method from within. This cleans this clear notifications and exactly same thing will be called from within disable as a first line within this method. And now what we can do is scroll up to the top and what I want to do is pass. This is disabled as the property for the slot. So there is disabled. Equals is disabled as well as both of these methods, so enable enable and then disable disabled No. One last thing. If we scroll down to our reset clear methods when the form is disabled, I don't want to enable resetting or clearing. So if this is disabled, Dan simply return. Terminate the execution of this methods. Same for the clear and also for the summit before summit. We actually going to add it to the summit event because some authority has one checked here , and then it delegates it to the summit event so summit event will only be triggered when the form is enabled. If it's disabled, we don't do anything. Now it's open. Our texting puts, and we are going to import where feasible. He has Wells after help import. Dee's a blur from and we going to go. I think it's three for mixed things, and he's a blur now. Its added to our mix ing's. We don't have mixing serious, so make scenes in the array. He's a blur, and the first thing I'm going to do a stray away touch the property to this input which will be disabled when is disabled to set to True. Okay, so let's scroll down. The next thing I'm going to do is if we right after the methods we are going to are the watch property is going to be object literal and watchers. What they do is they watch for data change on the given property. So the methods that we're going to specify here have to reflect the name off the properties on the given component. So he are we going to look for the disabled property and when this property changes from the outside world, let's say if we using this text input, if anything within the form rapid changes and then updates the text input property disabled , then this watcher will be triggered and we will be able to act accordingly. So it's takes is disabled flag, so whatever is going to be associating after the change and we're going to check if it's disabled, then what we want to do is this disable called Disable Method on our disabled out. The wise so else this enable so say the form dynamically changes its December. The form rapper dynamically changes its disabled property. Is these able property Because we are passing this through to the slot is a disabled, made, then affect the text input. Why, doing so it will either disabled or enabled input as well. Okay, so I think we are now ready. Let's open our views. Let's go to the templates, partials and form buttons attached. What we're going to do is to this summit button. We're going to our disabled flock and props is disabled. Then we are also going to apply the same to their reset button as well as the clear button now going back to our main index, The Blade. Let's apply the same to our inputs so it will be disabled if form has it is disabled flak set to true as well and the same on this other in boot. And let's re compile all our sets. So npm Ron deaf. And if you preview everything in a browser, you'll see that nothing has changed and this is because our form, dozen, half disabled property set to true. So let's go back to the editor and open our form that we go and let's out after the behavior Let's aren't disabled, said to sure save it. Refresh the browser and there we go. All inputs as well as batons are now disabled. Let's no try another thing if we go back to the editor ride before our where buttons leads are another set button type button, and it's not class about into it. And on the click. What I would like to do is to use props and the methods enable so enable. Let's duplicate this battle button and let's disable the other one, the Zabul calling the Method D's able. Okay, save it. Let's previewed in the browser. Refresh the page. Now if we click on enable. Look at this, you can see the but their form is now available. If we click on disabled, it dynamically disables everything. Enable click on submit and out I click disable. You'll see that all these warnings and the dialogue disappears because that's how he coded it. Enable it You can clear, reset and so on, and it is able again enable. And so Okay, I'm going to remove these two buttons because we obviously don't need them right now. But if you ever need to disable and or enable form using batons. You know how to do it. Now, let's know. Also remove this disable flak for the farm because we don't need this disable for now. If you would like to find out more about the waters, which we've used and you're in this video, you can navigate to view JIA's Don't work under the watches. You'll have the whole specification. Same for their coal methods. Off the function object under developer Don't Mozilla Delta Burke you'll find a whole documentation for it. 21. Trigger mixin: Let's now have a look of the trigger Street Guess which will allow us to sub meet. Reset are clear our form from anywhere within our page structure. They don't have to be within their form rap attack. So under the components, we're going to create a new direct stream. Call it triggers and here we going to start with a new view file called Trigger Don't View . And from within this far we can start with the templates. Template will contain spun with the class associated with the CSS class. Computer property will create in just a moment and then v html. What we want this spawn to contain between the opening and closing span tax will be coming from the computer property as well called label, then on click, we would like to call trigger Method. None of these elements currently exists, so let's quickly art script section and again, expert default. An object literal. Let's start with computers properties and it's great to see assess class. First of all, just method stops for the time being done label and then, after this weekend to create methods section with our trigger and trigger will just lock to the Council's accounts Soul Log, the message Police implement Trigger method. And this is because this will be the base class, which will be then used as a mixing for all types of triggers that we're going to have. Okay, so this is the basic structure? No, before computer properties we are going to art are where Mick sings, so mix things and for the mix things, we only going to have these a blur, so that's important as well. Import Dee's a blur from, and it's coming to levels up to the mix, ings and disabling. After that, we will have a few properties, so props and we are going to half group first of all, which will be of the type string and required set to True. Then we will have ISS submit, which will represent the flag indicating whether the given trigger should submit the form or is a reset perhaps so clear. If it's a submit, there will be slightly different behavior, and it will be of the time bullion and default will be sent to fall. So by default it will not be a submit trigger. Then we're going to have a name. Name will be used with the check boxes. When we submit number of items about as we are working on it, let's just out of straight way as well. So name a type will be string and default value will be items. Then, after the name, we're going to have resting. Label less than resting Label is going to be the label associated with the button when the button hasn't been clicked. When it's not processing any requests, so resting will be type string as well, and default value will be simply submit. Then we're going to have resting CSS class and it's styling. They want to apply to a trigger type string, and it will be an optional item so required said to false after resting CSS class. We're going to have resting icon because we're going to be using funds awesome here. If using anything else, you can also specify it is via this property. Arresting Aiken will be type off the string and required also false because it's going to be an optional property. Then we have working label working CSS class and working. I consider what I'm going to do is just duplicate all these three items and just change resting Teoh working so working label CSS class and I can. And rather than submitting eso submit for this working label, it's going to be processing as default and again working. CSS class and working icon will be optional properties. The next thing we're going to art is death Data Methods, which will return and object again with one property cold processing said to falls by default. Now let's have a look at our computer properties. We're going to start with the CSS class. First of all, we're going to check if this processing and if it's processing, then we're going to return an array. And from within this array, we are going to first check this working class CSS class. If it's specified the news, it's on this working CSS class. Otherwise, he used the resting one resting CSS class and also disabled because when the action associated with a given triggers being processed, we want this button to be disabled. Okay, so that's if it's processing. Otherwise we return again, array this resting CSS class, and then we are going to use disabled class on Lee. If this is the Zabel is set to true and this obviously comes from our disabled. Okay, so these are two possible scenarios when it's processing, we returning this. Otherwise we're going to return that now for the label. We're going to have a similar situation. So again, if this were also sing, then we are going to return on within the brackets. I'm going to use this working I can. We're going to check if it's available. And if it's available, we're going to use. I talk with the class associated with this and concatenation disc working Icahn property than concussion, ating with closing, opening I and closing. I talk and otherwise we are just going to return an empty string. And that's going to be calm. Captain ated with this working label. So we're going to have an icon and a label when it's processing. Otherwise, we're going to use pretty much the same thing. The only thing ISS we are going to change rather than working, it's going to be resting. So if we have resting icon, are they preparing did to our resting label? No should actually under space after this icon as well, so it's not right next to the label. There's one space basically in between okay and after our computer properties before our methods, let's are created methods. And from here we're going to register to listeners event bus, listen to disable started and then concatenation this with this group. And if that happens, then what we want to do. We want to call disable methods and the same for enable. So when disable ended this time, we want to enable button back. So that's our tree give you for complete it. In the next video, we'll have a look at the form trigger, which will act as a button for submitting the form for resetting it as well as clearing the input. 22. Form trigger: In a previous video, We've created the trigger component, which will act as a base class for all other trigger implementations. Now under the triggers director, let's create a new file Cold form Trigger adult of you. And from within this fire we're going to start with a script again and export default. And you just literally here l its first import telling you triggers or import a trigger from Khan Directory trigger and we can now use as a mixing so mixed sings trigger. After this, we're going to have some properties. So props and actually we're going to have only one under the form trigger. It's going to represent the event that we wants to fire when they're trigger has been clicked. So fire. Let's call it and it's going to be over the type, string and required will be set to true because we need to know what sort of event we want to trigger with this given trigger. So I created is the next method we're going to use and under created. We going to register to looseness event boss, listen to when different has been submitted, because when we submit the form, the submission started event will be triggered. So submission started hyphen and it's going to become cognitive with this group that we have as a property on the trigger. And when this event is being triggered, then what we want to do We first want to check if this is sub meat. If the given trigger is off a submit type, then we're going to set this processing property to true. Then we're going to have another even police. Snell is just copy all this after that and it's going to be submission ended. And here we're just going, we know going to be checking of its summit or not. We just set the processing to false. After this, we're going to provide our own implementation off the trigger methods. So methods and trigger, which will first check if the given trigger is disabled. So this is disabled. And if it's disabled, then we're not going to do anything so return. Otherwise, we're going to use event bus again and we're going to fire event this fire the property on this given trigger, and we can coordinate it wit. Hi, fan And after doubt the group names of this group and as you can see my idea automatically import these classes. We don't need to import it because event bus has been registered globally. So it's available to us without actually being important. So we are listening to the submission started in submission ended events, but we haven't actually triggered them from anywhere. Let's open our form and then Robert Class and from within the methods. Let's have a look at this start processing Ajax called Event here. Rather than just dispatching the Disable started event. We're going to dispatch the array because the 1st 1 will be this submission started concussion ated with this group. So when the form starts request these boat, both of these events will be triggered, and the same goes for when it's finished. So from within their stop processing Ajax called Event, we're going to a fire submission ended. Who waits the group name as well? No, let's aren't our new form trigger to our components. Let's duplicate this line and collates form trigger, and it's going to be on the components, triggers and form trigger. So that's not registered. We can close both of these files and let's re compile all of the assets, so NPM Ron Deaf. Now let's go back to our editor because what we need to do is to create a new include finals. If we go back to a template partials, we're going to create a new partial here, and this one will be called Form Barton's detached and again dulled blade dot PHP. My idea automatically this extension, and I'm quickly going to copy and paste the structure here, and we'll discuss it in just a second. So what we using here is three form triggers first ones for the submits to reflect exactly same structure as there once within this form, buttons attached file. Now we have form trigger with a group group is being pulled through the variable because we are going to be including this file later on within our main index, Dull Blade or pH B. M will pass the group name through as an argument, so we can then use it as a very able rather than declared this strictly here by hand for each of these three years, now we have a group. The 1st 1 is a summit, so have specified that it is a summit. By doing using this is some. It's true. Then fire event I want five submits is going to be submit. Hi, friend. And then the name of the group. This sort of event will be triggered. Then we're going to have a less for resting label is going to be submits CSS class, just the one that I'm using with as their foundation for icona. Want this check and for working I can. I want to change it to this spinning, spinning icon. The label will remain the same as it is. If we just go back to trigger. You'll see the different one for working labels processing. So that's what it's going to be. I don't want to overwrite it now for the other trigger. We have the event reset than label resets. For that clear, we have clear with the label clear. So that's our three buttons that it's now import them to our main index of plate above the phone because we want to use them outside of the form. We're going to include them again. We are using here blades templates within a lot of else or templates that we go for partials and form. Barton's detached this time, and we're going to Pass group as an argument. So Array Group and the group name is of date for So now this group is available as this variable within this partial. So that's not privy. Everything in their brows fresh the page. There we go, our sub battens, which outside of the from these are from triggers, deserve buttons that are inside off the form tack. If we heat on submit, you can see that submits the form because the event is being triggered. Let's just open a console If we go to view council, see the events on, and I'm going to clear them off first. If I heat on summit, you see, the summit update form has been triggered, and doubt in return submitted the form. Obviously, we have validation that we can reset it as well. With these buttons, clear it. As you can see, import is being cleared as well, the same as with the buttons within. The forms are clearing, resetting, clearing, resetting. Submitting all works exactly same way now. If we were to Zabel the form, let's just go back to the editor. And if we open this, I'm index blade. Let's just specify that disabled is set to true, you'll see that all of these battens not only the ones inside of the form will be disabled , so it's refresh the page. And there we go. Everything has been designed. Everything with the same group name has now been disabled. So let's go back to the edit. So that reversed this change, and I think we already for the next video. 23. Custom icon: I would trigger component works about. We have a small problem with it. What if we wanted to use an image instead of an I talk with the class attached to represent an icon. At the moment we sing from awesome. And if we go to the trigger, you may remember we've used this. I talk with those classes associated with it. Now, if we wanted to have the image, obviously there's no way to do it. So what we're going to do is re factor this trigger component to make a little bit more flexible. So the first thing we're going to do it from within the trigger component. We going to put two slots within this Pontiac 1st 1 slot, and it's going to have a name because we're going to be using name slots label on. And it will only show when we are not processing their request and by default, we're going to put I with the class farce if a check and an F a f w. And then after this, we're going to have submit. So now what we can do is remove this default resting label and we can remove resting icon. We're going to do the same for the working label and for the working Aiken. This will no longer be needed. So let's duplicate this lot and the other will be label off and it will show when the request is being processed and the icon will be rather than check, it's going to be f a spinner. F A spin sets rotating and then label will be default. Neighbor will be processing. Okay, so that's fine Now resting CSS class. What we're going to do is change it from required false toe default. We're going to change it by default is going to be button. And if we scroll down now, let's have a look at our computer properties. Let's now remove this label computer property because we no longer need it. And now let's simplify this CSS class here when we check in with the working class is present and then we use it. Otherwise, we're using this resting a CSS class with the disabled. Plus, we can simplify this by using this or operated sue pipes, and that's everything within our trigger. Now let's go back to our form buttons detached, and let's start with this form trigger first of all, resting label no longer applies because we either going to specify one through the slots are we used a different ones. Same for the resting icon working. I can. We will leave resting CSS class and we are going to use the same class for when the request is being processed. And the only difference will be that we will attach disabled, obviously, for go bark. You see that we're going to use arresting class plus disabled class attached to it. OK, so that's our form trigger because I want to use default value so it's gonna be submit and processing with these icons for their form trigger. The next thing we going to do is reflected these two. So again we're going to remove those arresting icon working icon plants. The resetting label will leave their the alert button class and within deformed trigger. This is where we go into aren't are where slots that replacements for this lots, and we are going to use the template stock because we don't want the content that we actually going to put into those slots to be rubbed with any specific talk. We just want the content there rather than having a SPAN Dave on the other tack wrapping. That's why using the template and we're going to use the slot attributes to specify which slot is it for which named slot is it for? And this one will be full label on and full label on. What I want to have is the icon as well, and I'm going to be still using formed, awesome so fast f a razor and is going to be f a hyphen FW again. Now you would be able to specify the image path if you wanted to use the image. Time and the label itself will be reset and doubts everything because for the label off, I want to use the default one, which is the processing. With this spinner. The same thing goes for their clear batons on your removing those redundant properties. I'm keeping resting CSS class and let's just copy what we have for this reset one again template for label on I Want F A Times Aiken and Button label will be clear if we save everything. If we know open our Terminal and Ron NPM run death and once everything's compiled, let's have a look at the result in the browse. And as you can see, we don't see the labels. Let's quickly have a look. At what? My Because in this and in the council, we see that property on Method label is not defined on the instance, but reference. Let's go back to our edits out and this girl up, you can see we're still using this label property, which we don't have any more forgotten to remove it. Let's save it. Let's re compile assets and it's pretty everything and browse again. Refresh. Now the air is gone in our buttons are still working directly. Consult me that sub meets resetting, clearing. Everything seem to be working fine, but with the added flexibility off being able to put whatever we want for the icon and the label rather than being coupled with the specific implementation. If you'd like to learn more about their views, name slopes navigates of you. Js dealt work and search for the name slots. You'll find a full specification for it 24. Base input: in this video, we are going to extract most of the logic from within the text input into the base input component, which will later on be used as a mixing for all our their input types. The first thing we're going to do is create a new final directly under the inputs directory , and it's going to be called base input dot view and how we're going to start the script again. Expert default. And before we do anything else, let's open our text of you were going to cut all these imports and move them to this base. Input. Let's paste them in. But obviously the path is going to be slightly different because we are one directory are pittle. It's removed for one off those direct truce. Now these imports all good. Now let's cattle. These mixing scum pone ins and props together with the data recounted out from a text and paste it inside of this export default segment. If we scroll down, we also go into CART dolls computed properties. So let's get this over to the base in boots as all these elements will be sure except for this input input listeners. So this one, I'm going to move back to the text. So let's create this computer care and let's keep this one within the text file and let's quickly import. This is well, so import and we're going to import base input from We got one directory up and now let's out. It doesn't mixing base inputs. There we go. And the next thing we also need to update after that text files or data which will only return type off the inputs. So return and it's going to be type by default is going to be text because that's the type off the input that we have for this specific component in office Scroll up. And now, rather than having type s text, we are going to set it dynamically soul type property this way, when we later will be extending this text component. But with any other imports types, we will only have to specify different data type, say number dates and so on in order to use the same template and Onley half very slim components for other import types. OK, so that's this. We also need to copy some methods, so we're going to get this meat we going to get initialized. We're going to get register listening as well. We keep reset and clear within this text file. Let's go back to death base in port and it's out methods and it's paste them in. We will also aren't the fullback for resetting clear so reset and clear. And here we're just going to look the message that console lock saying that the given input doesn't have implementation off these methods. So please provide, uh, reset provide resets methods implementation for and it's give it the name of the inputs on name and its copy Old this with clear methods. No, let's change this Reset with clear. And we had done Okay, Another thing. If we go back to tax this watch, I needs to be moved to death base input as well. So after the methods, we just based this watcher enough, this girl down. One other thing that I want to aren't to this base input is too new properties which will be Listen, it's going to be of the type string, and it will be a optional so required sets, too bulls and the other one is going to be fire as well. Type string and required sets to false. Both of these will represent event names that we wants to either listen to or fire with each keystroke. So fire is the one that we're going to use within the base inputs and listen will be used with some other input type. So we know going to be providing an implementation for actually listening to this property to to the event with the name of this property within the base input. But it will be used with other import types. So for the fire will be going to do this. First of all, if we scroll down to our meat method, what I want to do is every time we meet input out of this component, I want to also call the method this and meet fire event, and we're going to pass the value to it. And let's create this magistrate ways after the meat amid fi event value as argument and here we're going to check if this fire if there is value associated with despite property than event bass, we're going to fire event with this name. So this fire and passing the value as the second arguments OK, so That's our five and another thing for the meat method. Specifically, we have value and we have input. But some are there. Input types may emit different type than an import. So what we're going to do here is create second arguments to this methods. We aren't event, and by default we are going to send it to input. But this time we're going to use this argument rather than the actual text input. And this way we will be able to have you specify if there's anything else than input for the event type. So we're now ready to create some new inputs types under the import directory. Let's create the 1st 1 It's going to be email, adults view and again script, and it's going to import text from Kandahar, a tree text and now expert default. And the only thing we need to do is to art are mixing here. So we using this text mixing and dent data, it's going to return, object with the type, said to email, and this will branded that input with the type sets to email. Now I'm going to create a few more imports, pulls this video and I get back to you once I'm done. Now, have other. A few more inputs. As you can see, we have a date. We have dates. Time We have email, we have hidden. We have number. We have password, we have time and then I've registered them as components. So we have data input dates. I'm import and so on. So all these imports that have created are now valid view components available to us within the view. Okay, Another thing that I want to art is open our robber. And sometimes we will have data which is being represented. Inform off in the rain. For instance, If we going to have a dress, we may have addressed property with each item representing, let's say, first line, second line town poles killed and so on, Being represented as an item off the rate. In order for us to be able to work this way, we need to actually pass the new property to our wrapper, which will then set these properties straight away on our field data property. And this is because ray items are object. Items cannot be dynamically registered on the components. So in order to do this, let's just up new item called collections. This property will be of the type, object and default because it's an object we need to actually return it. We're going to return an empty object, storage 10 and the object literal. And then what we going to do here for the fields? Because if we specify them to start with, let's say address which will be of the type, object and empty of you to start with. Then we also need to make sure that it's registered on the field so we can actually use it as an index with interview. I'll show you in just a moment how it's going to work. So I'm going to use and spread operator here to assign object type property in between a curly brackets, three dots and then this collection. So whatever has been passed through as a property, Okay, now we can save and close this and all other files, so I'm just going to close it. Let's re compile all the assets and PM round deaf. And if we go back to the editor, I've now also updated our view of other disk elections property with the address which will be of the object type off, then updated their import tax input for the first name for the last name and then of audit as well. For the email, you can see email input. We have one for passport inputs, and we also have four other fields text inputs for the address as you can see address and dent the line because the address is going to be representing the object. And because we cannot said the property off the non existing object dynamically. That's why we had to have this collections property added to the form robber to declare it up front. Okay, let's review everything in the browser and refresh. You can see all these fields here if I sub means validation works. If I just preview everything in view console. Let's have look at this as well. So from Robert, you can see our collection has this address and then we have our fields. One. The address which is representing the object, and we have email, first name, last name, passport, obviously all fields off the address as well. We have first line a second line town and post kilt 25. Checkbox input: Let's not have a look at the checkbooks inputs under the inputs improved director. Let's create a new one specifically for the check boxes will call it Check box. And within these director, let's create new view files. Understand. To use a template, er is going to be check box. And again, we're going to have a template section script, export default properties, data on methods. Now, before we do anything else, let's registered its components. So go into the components that Js. I'm going to duplicate one off the last lines, and I'm going to change it to rather than timing. Police is going to be checked box input, and it's going to come from input. Check box and file is check box if you save it and close it now, check boxes have to. Status is it's either checked or unchecked. Now, by default, it's either going to return true or false. Oh, it's going to have a flag like on, for instance, if it's checked. But what I want to do with our checkbooks is two hours to specify. The valuable actually want to meet when it's checked and when it's unchecked. So if we want to for instance, use a and B letter for checked and unchecked we will be able to do it. Okay, so under properties, were we going to start with ease a property which will determine whether on unchecked should we remove the given input from the collection of fields so that the name off this property will be removed when false, and it will be off the type bullion and by default, we will set it to false. So by default it will not be removed from the collection that we're going to be sending with the request. The next property will be true value. So if we want to have a string into Joan Thing else, we will be able to specify what this true value should be when we actually a meeting it from this component to the robber and the default will be bullion true. Then we're going to have full value as well, and this one by default will be false. So by default is going to be a Boolean true or false, we also need to import our base input. So we have all those additional properties and functionality that every other input has so import base in boots from base input. And now let's make sure that we have it within the mix ings so mixing and we using base inbuilt. Okay, the next thing we're going to do from within the dates we are going to have just one property called checked and it will equal to whatever the new method is selected will return. So let's quickly add this method. It's selected methods what it will do. A simply check if it would return that bullion truffles this current volume. The Valley that we're going to specify on this component is a current value in the page loads if we have pre populated form. If we have some data that's already stored somewhere in some repository and we want to reflect it within the form, then obviously we're going to specify what this kind value father's given input ISS And if that's equals this true value, and that should return Boolean true. Otherwise it will return false so will be selected. If the current value equals true volume, then the next thing we're going to do east to create a computer section and here what we going to half ease the property That's going to be called value to a meat because we know going to be just returning true or false. We need to first find out what value should be immediate to the listener on the Robert. So return and we're going to check. Is this checked? And if it is, then return this true value. So if it's a string that that's what's going to be immediate otherwise return fulls volume . Now let's add mounted section. Some mounted wants the dome is ready than what we going to do. First of all, we're going to call this update method, which will create in just a moment. Let's just are the methods stop here so update and then we're going to do we need to initialize our component eso Let's just this initialized as the methods ah own our base input. Then we have this register listeners as well another methods on our base input. Now if we go back to our base in, but let's have a look at what else we need to actually do So we are holding our initialized methods, which will simply send all the validation rules to the rapper. Then we also registered the listeners for resetting and clearing the input. And what we need to do is to provide the implementation for the reset and clear methods of free copy. Both of these scroll down and within the methods. Let's space these in and let's remove this council log for the reset when we are resetting the from What we want to do is to set our checked property buck to what it was when the form first loaded. So this is selected method will return. The value were after. So what we need to do is from within the reset we're going to go for this checked equals. This is selected. And after this we go into coal. Our internal update methods of this update which will meet the event back to the rapper for the clear methods. What we need to do is to make sure that check check boxes unchecked so this checked will set to false and again we're going to call update method to a meet the event. Now you might be thinking, Why have I chosen to have is selected as a method doesn't take any arguments. We could possibly have it as a computer property. The only problem with this is that we cannot access values rendered by via their computer properties from within the data. And we always need that value for our checked property. That's why we had to have it as a method. Now, from within the update method, we're going to first checked. If the check boats isn't checked, so isn't checked. End this remove when false is true. In that case, we're going to fire an event called Remove Hyphen Field and then we're gonna go into can coordinated with the group name and then the value. The data that we going to be a meeting is going to be the name off the input. So I would rapper will receive this event and then will it will act accordingly. Obviously after days, what we need to do is simply return to make sure that the statement doesn't go any further . A But if it's checks or if they removed when false is set to false, then what? We going to do it and meet the events of this meat method which is obviously on our base input, and we are going to just called this value to me. That's the value we actually wants to send with this event and let's quickly have a look at our and meet method. As you may remember, by default, we've already specified that the event will be input. We could change it to a change event for this particular case because the check box meets the change event as well. But I think input will work just fine. So we leave it this way. OK, now let's look at the templates. So, template, we're going to start with the DIF, which we would want to only show so v show when the show data property on the base input is set to true. Now let's art some class and I've already other the class checkbooks group I them which is a valve obviously with our SAS files. Then we're going to dynamically bind glass for their computers. Rapper see assess class We also going to apply style dynamically so style which is going to come from the computers rapper CSS style A computer property okay and with then we are going to have input which will be off the type checkbooks and then we're going to bind i d as identity property. Then we have name coming from the name property we have disabled from there is disabled property than we have out or complete from outer completes all these usual suspects which we had with all the other fields after out a complete we have classes. Well, input CSS class. Then we're going to have a V. Modell and remodel will refer to our checked property. So checked this one. We can obtain the value on the goal when it changes on the import as well. And on the change event, we want to call our update method. After this, we're going to have a slot which will contain by default and the our validation. Now we may replace it if he wants to dance, why the slot? But by default, it will have a validation if coming from my validation component which we've already included within the base input with you go up a scrolling. There we go. You can see our component validation is already available because we obviously using this base input as a mixing All those components that we also included within this mixing I available to us with within any class that actually uses it so full of the validation for the label we're going to use whatever it comes from the label property. Then again, same thing I d from identity. Ah, name from again dynamically name from name property. And then we have show which will come from the show validation property than CSS class and which will come from the computer validation CSS class. Then we have validation with our messages. So validation and the arrow if there are any errors from air property and that's everything . If we now save, I go back to our terminal and that's re compile everything. So NPM Ron deaf. Now that everything has compilers go back to the editor I have already are there three trick boxes to my view, my index blade under the main directory, you'll see we have a checkbooks inputs with the name share. We have some label model we've associated with this particular oneness on the props fields , chef name of their property. Then we have validation for required and it needs to be within the A, which means the only acceptable value will be letter A. We've past errors carrying value of said to a as well, so it's going to be checked. True value is a and false value is being. And for the validation CSS class we've said it to block, which means there the container will have a display set to block the CSS property. Then we have another checkbooks input. Similar thing a day. Only difference is we've said this remove one false to truth. So when is going to be unchecked? It should disappear from within the fields collection. And for the last one, we will simply have Billy and true Off Falls return based on whether it's checked on checked because we didn't strictly specify any other values for it. Okay, let's have a look at this in the browser. So if we refresh everything, we you'll see this check boxes down here. If I just go to the form robber, let's have a look at their values that we have on the fields. Object at the moment, Shay's a. If I uncheck it, it sets to be, and so on. Now, if I click on agree with its privacy policy, you'll see this privacy has been added by when I uncheck it, it doesn't disappear. This is because we haven't it, provided any handler for this event that we actually a meeting. We will work on this in the following video. Now there. Last one we have for the I agree it's it with the times and conditions for that. This terms field we have true and false. So when it's checked, it's true. When it's inject, it's false. That's not move the next video when we actually going to work with this problem off removing the field from within the fields collection. 26. Removing checkbox entry: in a previous video of Created Our Checkbooks component in this video, we're going to have a look at the problem we've encountered when we actually adding and removing filled from this field collection. Have a look at this chambers. When I check it, you can see this privacy set Richards being added to this fields collection. When I uncheck it, it should disappear, but it doesn't. If we have a look at the events that are being dispatches, clear the console refresh page. And if I now click on this check box, dispatches the input and then if I uncheck it, There we go. We have our remove field hyphen. And then there's the group name, which for this particular form it is update, form and the payload. The data that we're sending with this event is the name off the field, which is privacy. So the event is being triggered. It's just there's just no 100 for it. So let's go back to our editor. Just a recap. Let's have a look at our checkbooks update method. If the checkbooks is unchecked and when they remove when false flag is set to true, this is when we are firing this event. It's for more Filton and come coordinated with a group name we passing as a payload. We are passing the name off the field. So we need to capture this event and obviously process. It's accordingly. So I'm going to cover the entire block here, go to our rapper don't view file And if we scroll down to ever created, I'm going to paste it here and rather than fire, I'm going to change it to listen because we are listening to this event with the group name . And rather than using the name of the field this time, I'm going to delegate it to an internal method. This remove field and we don't have this method yet. If we scroll down right off the clear notifications, this is what we're gonna put it. So remove, filled. And what dis method will take is the name of the field, because that's what we are sending when we actually dispatching this event. So the more field here we are going to use to help it. So before we do anything else, I'm just going to split screen and I just go up to the top and import this help. It's gonna come from import helper from and we go 12 levels up core. Then we have helper class that okay, so we've important is we can close it and let's go back to our methods. Remove field. We don't have this method on the help yet that is going to be called Helper, and it's going to be called Remove Object Properties. It's plural, so we're going to pass several properties or just a single one Reupped in array in our case is going to be a single one, but we go into surrounded with the set off square brackets, indicating there's an array. First arguments that we're going to pass to this particular method will be the instance off this Robert. So this. Then we are going to pass the field that we actually wants to remove and because it's a single field that we dealing with here, we're going to wrap it in Ray, as I've already explained, and we passed the name of the field and in the last thing from what collection we want to remove this field and is going to be this Internal fields collection. Now let's copy the name of this methods open our helper so core helper gs, and that's going to be a static method as well. So static remove object properties. First of all, we taking a rapper, which is the instance of our rapid component. Then we take indexes that we want to remove. We could have just a single one, but this method might be used by any other components which may have a collection off indexes. So rather than just putting the single one, let's just do it as a collection. Then we're passing the object which from which we want to remove the values, the given properties and then the fourth property, which we didn't pass through, will be parent key. This one will be generated by dis internally by this particular method. Okay, so the first thing we're going to do is obtain their properties off our object. So object and we get getting keys off it so keys and we pass through an object as an argument and then for each off these properties, each one will represent the key, and then we are going to have our Colback methods. First of all, we going to do is specify a new parent key. Let new parent key equals and we're going to check if parent Key is present. Then use it so parents key and concatenation it it with default Stop. Otherwise we are going to have an empty string and then we are going to come coordinate it with the key. We're currently Iterating over. Now what happens here? Say we have an object off this type and we have say name, which is an object and has first, for instance. And then it has a string. So what happens first on the first iteration we because of you See, we are starting Iterating this point. You will not have any viral, so this will simply return an empty string. And what we going to get will be the name as this key. So in the first situation, we only going to obtain the name for this new part and keep if we were doing the second iteration on this given object because this is an object. Then we're going to go to the next level. We will already pass the key, this new parent key which will represent the name. And here we're going to con coordinated. So it's gonna be named full stop and the name of the key first, So this will result in name first string. So this is how we're going to come Caffeinated, Basically. OK, uh, let's remove distemper codes. So we have our new parents key. Now we're going to check if exclamation mark helper internal method is object. We have to use the name off the of the class because we referring to static method and we check in if orb on this object and the given key. If this is not an object, then we're going to do something else. We are going to eat a rate again. So helper, remove object properties were passing the rapper through as an argument. Our indexes and then object with the key were county looking through so key and then new parent key. Now what happens here if the given value is not an object, we know that we've reached the end off objects iteration, and if this given keys found within this indexes collection than does the key we want to remove, otherwise we are going to look again because that means this is an object. We still haven't actually obtained the key with the associative value other than object, because if it's an object, we still need to eat race of it. Okay, so let's no check if an exclamation mark indexes includes If it doesn't include new parent key, then that means that this particular key does not needs to be touched. So return and we done with this next. We are going to check if the given property is not inherited from a prototype or any mixing because of it is then that's no the property want to remove. So if exclamation mark object has own property and we passed the key, if it doesn't have its own property, then we also terminate the statement. Otherwise, if both off the above returned false, then we want to use the instance off our components of rapper and the method that we have available on it, which is delete. We used the object and the key that we wants to remove from this object. That's how are we going to remove the property from our fields collection? Okay, lets no saving close it. A. The next thing we need to do is to re compile all our files. So let's go back to our termino and run NPM Ron deaf, and now we can go back to our browser, refresh it and let's have a look at our fields collection. Now, if we now check the check box, it appears, but if we uncheck it, it disappears. As you can see, it works final the same as before. If you would like to lend more about certain methods that we've used you in this episode, have a look at the view documentation you have. You delete methods which we've used today, as well as a ray prototype for each, which allows us to eat a rate over the race. 27. Checkbox group: In this episode, we are going to have a look at a check box group, multi Select Checkbooks group. The first thing we're going to do is to create a new mixing that we're going to be using not only with this fire, but also with any other multi selection multi check components later on. So, under the input director, let's create a new file and is going to be a view fall. So multi select input. And within this file, we're not going to be rendering any templates so we can remove this. We won't be using in properties we will import. However, our base imports are import base input from, and it's in the current charity base input Now. Obviously, we need to register this as a mixing, so mix things and within the array base input, then from the data. What we are going to do is to aren't the property colts selected and selected will take the current values off. This current value, which will be passed through as an array because of the multi select will have multiple items, and if that is empty, then we are going to just use an empty array next we're going to override the implementations of reset and clear methods. So reset and lets out the stuff for clear as well. From within the clear we're going to start with clear this and meats and we're going to meet this selected, which will reset at the same time to an empty array. So when we clearing, we set selected to an empty array. And that's what we're meeting from with this Within this component on the reset, we are checking if this current value, if its present than this a meet and we're going to past this selected equals this current value. Same thing is, before we are setting this selected to the current value and then we are meeting it as well . After that, we heat return to terminate the execution of this method. If the value was not provided, if their valuables empty, then we simply call this clear to emit an empty rape. Okay, that's these two methods. Then another method that we going to have here is to help a method which will check if they given value is inside off the selected collection, so is selected, and we take the value and what we're going to do here is used. Return this selected and the method includes, and then we passed. The volume through is an argument, so check if they selected array includes this given value. Our multi select input mixing is now completed will reuse it with some other components, so it's no saving. Close it within the input checkbooks. Let's create a new view file and this son we're going to call it Checkbooks Group. So check box Group and from within this component, we are going to start by importing this multi select inputs. So import multi select input from, and we are important this two levels up multi select input. Now let's registers as a mixing. Some mix ings within the array again. Multi select input. Okay, we're not going to have any props, so let's remove this section. We know going to have any data. We will have mounted methods amounted method which will first check if this selected property on our multi select input. If it is selected, then I meet the events or meat this selected. So all items that are within the selected array will be immediate to the rapper. Other than that, just a standard initialize, initialize and register listeners of this register listeners with the multi select. We will need an access to the least of available options to though this. Let's open our base input and that's are the new property. And we are going to others property. After the current volume, it's going to be called options, and it will be off the type. Um, it's going to be array. It might be object, but it also might be a strength and default value will be in the ray rendered by the anonymous function. We will also aren't a method to our base in port. If we scroll down under, the clear methods will have another option which will generate the option i ds option i d. We will pass the option through as an argument and here we're going to check if option has index, I d. Then return. It's our option, i d. Otherwise we are going to return. This names the name off the input concatenation with hyphen and then the option value where this is going to be used when we are going to look through the least off options. Each option will have name and value properties associated with it. But sometimes we may also art i d. At which point when we are going to be creating input. It's I D Property will be either this idea associated with this option or what we concoct anything here. So it's going to be, Let's say, name one if the value for the given inputs for the given record is one. So we either specified it's strictly with what we are passing through to the options property. All we just can coordinated ourselves. OK, so that's our basing. But we cannot save and close and let's start building our templates off their checkbooks group. We're going to start with the DIF with the V show. We only want to show it when we should show it. So show property and then class. We're going to bind our computers, robber, CSS class and den style as well, which will be computed Robert C. Assess style. After this, within this day, if we're going to start with another dif with V four directive and we're going to take option in options, the key will be option volume and then class. We're going to specify check box group item within this iteration against I would input, which will have type this time is going to be checked box and we have i d off. And this is where this option I d, will come into play. But rather than just using this method because this specific whatever this method will return will also be used with the label. So I'm going to create if I re able he asked option on disk or I d equals option I d methods and we passed. Option is an arguments option. Now we have this option idea available. We can use it with the label later on now name which comes from name again. We will have our disabled. Our tribute coming from disabled a Sorry, not disabled is disabled property. Then we have out of complete equals out or complete. We have value which comes from option and value. So whatever we have associating for the given record, then we have checked equals ISS selected method from within the multi select input with great earlier option value. So this will check whether this given record with the vote which is given value, is within the selected collection and then class will just use input, CSS class and the last thing on change we want to trigger update method will on this method in just a second. So they're just actually other methods stopped for the time being. Update. It will take event, and after this, we create this label and it's going to have dynamic four taken from this option I d. Valuable we've created on the go here and then v text just to take option and its name as a label. OK, so that's our template. Now let's go back to our update methods and the first thing I'm going to do secrete the constant called value and will take event targets and its volume. So the value associate it with the given input after the event has actually happened. And then we are going to check if this is selected and we pass through values and argument , and if it is selected, then we need to remove it. So it's going to be this selected collection, and we're going to filter it. This selected filter. Each element in this collection are a function, and we check element does not equal value, so return only those elements that don't much this value and we obviously over right in this collection here, then else we need to add it. So this selected Bush and we push their value and then we need to omit it. So this meat and we pass this selected as an argument. So once we feel tits, our selection, then we're meeting it with all values that are currently being checked. Our component is no completed in seven. Close the phone. Let's open components the GS and it's added so check box input. And actually it's called it Check box group input and it's going to calm from checkbooks group file. If we save it, close it, go to our terminal. Let's run NPM around every once more. And if we now go back to the editor, first of all, I've added this array color. Still were collections on the phone. Drop it to make sure that colors are being collected as in array. Now, I've also ordered, of course, vacancy have collapsed. That previous item CSO. He had this concepts and so on these other check boxes about another colon of other cores, which requires exactly two items. Now validation started validation outside of this checkbooks group input. Our validation will only be displayed when there is a problem with colors. When there is an index on the heiress collection validation, we the field is required. It needs to have exactly two items selected, so we have minimum toe items. Maximum toe items. Ah, we will display this block item. Then we have our checkbooks group and our component newly registered checkbooks group input . And we have the group we passing again, dynamically from taken from their props form rapper. Then we have named colors and options will be a blow green and orange values as string. Then we have obviously our model, which is colors and validation passed through to the component itself as an array because we not displaying valuation from within the component we displaying this above the component is only one validation needed. No one pair each checkbooks and that's it. So and now if we save it and preview everything in a browser, refresh and you can see we have colors. If I open view council as well, let's just go to view going for go to form. Drop it. Let's have a look at that fields. There we go colors is empty it at the moment. If I start checking, you'll see this is being filled with the values associated with the check boxes. If I select all three hit on Summit, you see we have validation message because we only should have to. If I sell, it just won. The same message will display. But if we select to off them, validation is succeeding in this case. And obviously we only have two items, which is what we're after. And if we now go back to the editor, let's art current value. And let's specify that we should have Blue checked already when the page loads. If we go back to the editor, refresh the page and there we go. That's check. Let's see are where fields and colors. You can see this one item blow index. If we start our theocracy dot changes as well. In the next video, we'll have a look at them multi checkbooks selection 28. Master checkbox: in this episode, we're going to art Master Checkbooks component which will allow us to talk. Go multiple check boxes at a time to start with, we're going to add a new mixing. So under the mixing is directory regard to create a new view G s file called a multi 100 her. And here we are not going to have any templates and we are going to have some data. We won't have any properties for dates are we're going to have just items which will be represented by an empty array. After that's we're going to have mounted and from within mounts its We're going Teoh, call this register custom listeners, What about this method? And now we're going to use event bus and we're going to listen to the event represented by this. Listen, property and this. Listen, property is on the base input. You may remember we have this. Listen here because this new multi handler mixing will be used with components that make use off this base input. So we are listening to this event. If this event is triggered, Dan, we are going to execute the callback function and Colback will take an item and check if item has removed, Flack said. Too true, then what we going to do is call this removed method, passing the item through as an argument. We don't have this method, so that's quickly of the methods. Stop remove. It takes item and we'll deal with this in just a moment else. If item volume is present and our internal this items collection doesn't include item value , then that means that we shoot added to this collection. So this I temps push and we pushing item value after oldest. We are going to call. Another method called This evaluate and evaluate will be just an empty methods within this mixing and it is an empty methods. It will be the implementations of these methods will be provided from within any component that actually makes use of this mixing so from within their remove. What we need to do is to make sure that we removed the item from our items collection. So this items equals this items and we going to feel to them and we going to have an element, and if element does not equal item value, it can stay otherwise. Make sure that it's not being returned with the fielded collection. Okay, so we're mixing is now down. It's no saving. Close this file under the checkbooks. Let's create a new view file. We are going to call it Master Check Box and let's quickly register it straight away on the components. So if I duplicate last line, it's going to be must if we just go here, Muster check box input. And that's going to be master checkbooks. The view. Okay, if we seven close it now from within our master checkbooks, the first thing I'm going to do is to import two components of import base input from and we going to directories up based input and the other world being our mold T handler, which would just audit from and not going to be. 12345 directors up mixing and multi 100. Okay, let's registered them. Make sings within the ray base in blood in multi handler. Then for the properties we are going to have total, we need to know how many check boxes in total there are visible on the page, so type will be number and required will be set to true. Then we also, although our base input contains the fire meth property A. But this property by default is set to false and on our master checkbooks. We need to have it set to true. So what I'm going to do is copy this and set it to true, as required for the data. We will have to properties first will be checked, and by default it will be set to false and the other will be in the terminates that they're meet nit and also sets to falls by default. While this indeterminate one s major it. Eva Braun's browsers support their checkbooks status in the 10 minute which is rather than being checked, it will be like with the minus symbol, meaning that not all of the check boxes within the group that this main master checkbooks belongs to are checked just some off them. Okay, so it full the methods we are going to override provide our own implementation off this evaluate method with created earlier, Under the multi home live we open it. You remember that we've just provided an empty method. Stop so vile you ate. And this method, what I want to happen after this event has actually bean triggered and all our items have been fielded accordingly. What I want to do then is do this checked equals Check the length off all items items length, triple equal symbol, this total which which would indicate that all of the items have been selected. If number off attempts within the items collection equals total number of items, then checked should be sets to true. And in other words, our checkbooks will be checked for indeterminate. We will on. Lee said it to true when the number off I Thames is less than total, but also Molden zero. So this items length it's more than zero and this items length is less than this total. Now, as you can see, we are calling length on this collection of items three times within this single method. So rather than evaluating it three times, perhaps it would be better if we created a constant called length and associate the length off the items with it. And now we can replace it. This time we only have to evaluate it once rather than three times. Now let's aren't one other method called update, and this method will simply use event bus again to fire the event associate with this fire property and the value associated with checked will be sent as a payload off this event. Okay, so now let's have look a template, No template. We're going to start there with outstanding dif which will show so v show when the show property said to truth class checkbooks group item Don't we going to have class computed rob, etc Assess glass as well as style computed Robert C s a start inside. We're going to have our input and against same things before Type this time is going to be checked books as well. We got to have I d represent by identity. I don't have a name down, will have disabled IHS disabled we have out or completes will have indeterminate and we need to have prop on it because we need to set this as a property off this input and it's going to be taken from this indeterminate property. Then we have class input seizes class will have the model is well internal associate with the Czech property off the data block and then on change. We want to run update method. That's our input now for the validation again. We're going to use the slot because we may have it. We may not. We may have validation above the checkbook, so however you want it so it will be replaceable. But by default, we going to use validation. Wits label taken from a label with i D taken from the identity will have name from name will have show on Lee when show validation said too true. CSS class will come from computed validation. CSS class. We have validation coming from a validation property and errors from the era, and that's everything within our master checkbooks component. Let's close all these files and open our checkbooks following because now we need to aren't some listeners for those events triggered by death master checkbooks? So, first of all, I'm going to our coal to the register custom listeners from within the mounted section off there checkbooks component. And I'm going to all this method. So register custom listeners. First thing I'm going to do is to check if this listen has any value. And if it does, then I'm going to this event bus to listen to the event associated with it. So this listen, and once it's been triggered. I want to execute a callback function which will take checked coming from their payloads. And here I'm going to do this checked. I'm going to set it to whatever we received with the payload so checked. And then I'm going to call this and meet fire event. But rather than calling the method on the parent base input mixing, I want to provide my own implementation, which will overwrite it and from within this implementation off the methods, I am going to start with base input. We are going to actually call the method on the base input methods. We going for the method name and coal method to invoke it. I'm passing instance of itself. Two. It is the first argument, and a second argument will be the value that I want to send with up a lot. So value will be this true values or whatever we wants to a meat. When the check box checked and remove, flack will be said to this checked but the exclamation mark. So if it's checked, we don't want to remove it. If it's unchecked, we want to remove it. So basically the opposite off what the checkbook status is actually being set. Okay. And after this, I will also want to a meat the value to the rubber. But this time we're going to use native you and meet method. We're going to use input for this purpose and this value to meet property. And if we know to compile all of the assets, so npm Iran, def. And if we now go back to the editor and have a look at the view file, you can see that off already created a structure under the multi check box in explain the PHP have other the master check box, which would just create it. And in a master total I times three I only have three rows in this table. We have listen to the select single event which those individual check boxes actually are firing and fire. So, like multiple, Which does individual ants actually are listening to? We have true value, which we want to set with each off this individual check boxes. So now if we preview everything in a browser, if we go to multi checkbooks, there we go. That's our least. If I toggle them all, you can see the hour working if I check just one, you can see we have this indeterminate status here. Another one. And if I select the last one, that should change to eject checkbooks. Everything seems to be working Fine. And if you preview everything within the View Council under the events, if I select them all you'll see event for each of these checked boxes has been triggered as well as select multiple for the main one. If I uncheck it, the same thing happens. If we have a look at the payloads for the single select single, you'll see that when we unchecked them all dream office sets to true value to the value associated with given checkbooks. If I check them all again by select one of these, you see, remove is set to false this time with obviously the same value for the given input. And if we now try and have a look at the values on our master checkbooks imports, we have our I temps property. There we go. We have three items selected by uncheck it. You can see the items arrays empty. If I sell it just 12 They are all being art it as I check them 29. Refactoring to renderless component: So one of the previous VDs, we've created this form trigger together with the associated trigger components. Now, I'm still not entirely issue. I'm happy with the way these work and this is because if we go to a trigger, we have this template when we are wrapping the entire button within a span Take. But what if I wanted to change it to a button talk, for instance, or anything else? This wouldn't be possible. The current set up. So what we going to do in this video is do a little bit off the re factoring and we are going to convert this trigger component into a render less component when we only passing through the functionality to the scope without actually rendering any output as HTML And the first re factoring that I'm going to do is going to be applied to this processing property. And this is because this specially component as well as a Jack Scola have the same property . Ende both set it to true or false. So what I'm going to do is create a new mixing cold process. So and from within this component, I'm going to remove the template. We only the script section. I'm going to go back to the trigger and can't this data methods and override the existing data on this new component? Removing this props method as well, Then, for the methods I'm going to create to 1st 1 will be start processing, which will simply said this flock to trousseau. This processing equals true and then we're going to have stop process sing, which will reverse it. So this processing equals false and as everything from within this mixing weaken now, saving close it and let's quickly replace it within actually added to this Ajax colossal import process. So from prose Issa and let's use as a mixing, so makes things process so and know what? I'm going to just remove this data from within this Ajax Cola, and I'm going to replace this processing true and processing false, to start pearls to sing and then stopped processing for this, setting it to fall. So stop processing. There we go. So that's our Ajax color dated back to the trigger. We've already removed the data method. Let's import it as well, so import pro cysts are from that's gonna go to levels up. Mixing Sprouse is so and again. Let's added to the mix things that we are using. So processor and if we open our form trigger, don't view components. Now what we need to do here We are setting this processing manually, so that's going to be start processing. And this one is going to be stop processing. Stop processing. So now if we go back to our trigger, let's count everything that we have within this template. And let's remove this template completely. Now if you go back to our form, Barton's detached when I'm going to do space to go within the first form trigger. Let's just fix the indentation here now, Father Class. I'm going to apply day classes dead I have associated with this resting CSS class, so it's going to be just a class and is expanded. Button Click Trigger will still stay the same, and we can now remove this resting CSS class. And if we go back to the trigger, let's remove this property. We go back and next thing I want to do is to make sure that we don't have this named slots . So what I'm going to change this to will be just a spun, which will be shown when processing. Otherwise we're going to show this other spawn. It's going to be spun as well, and we're going to use V else statement. So this one shows when the processing flag isn't is set to false. This one will show otherwise. So closing spawn as well. So that all works fine for the first button. We will replace the other ones once we have the whole implementation done. But let's work with this one first now, because we are now going to be building our HTML for the about ourselves we don't really need to pound past. This is some meat flock because what this flag does is if we go back to the farm trigger and the only thing it does, it's sets this processing to true or false, we can set it to true or false, and it will be down to us whether we want to show this process in Barton or not from within the HTML. So what I'm going to do is going back to our form trigger. I'm going to re factor this created segment here. So rather than having this that way, I'm going to remove the need for check for this ISS submit. And I'm going to call this method directly because it's a method without using brackets, I can pass it through as the second arguments to this listener and the same is gonna go for this Stop processing. So we don't need to have this anonymous, so we don't have to have this closure based Goldbach. We can just pass the name off this method straight through. Okay, so going back to our trigger now, we can remove this, submit property as well, because we no longer use it now because we are building our own HTML. We can remove this working CSS class because if we want to have any status when there the request is being processed, then we will just provide this l statement for the processing status. So if we go back to trigger, we can now completely remove this CSS class from the computers, which means this entire computed section can be removed and all we are left with is just a single method that created as well as props and mix ing's. And that's pretty much all we need for now. We will aren't the render method in just a moment. But before we do this, let's just go back to our form trigger and what I want to do here. As you can see, that we are checking from within the trigger. We're checking if the disabled flag is set to true. And if it is, we just return to make sure that nothing happens when user calls this method. Now, this isn't going to be the only instance that we're going to be checking this for this. And because of this, when I want to do is to create a new method on our trigger component. We are going to call it conditional triggers a conditional trigger. And what I'm going to do here from within this method, I will call that this trigger method. But before I will do this, I will perform this check that I'm going to cut this if is disabled from within the trigger , based it into this conditional trigger. And now this check will only leave in a single location rather than having this called from every single three methods. Okay, Now let's re compile all of the assets saw NPM Ron deaf and once everything has re compiled If we preview everything a browser, you'll see that our buttons are now gone and we get a bunch of errors in a console. And they saying that property, a method trigger, is not defined than we have. Property or method processing is no defined and so on. And this is because if you go back to the edits are you'll see we are using processing property were using this trigger method, but we have no access to it at all. We passed this HTML as a slot to this from Trigger, but we don't have any template within the trigger anymore. So in order for us to be able to access those properties and methods from within their slot , we need to make them available through the use off the render method. So Brenda methods on our way trigger components and from within their end, the method. We are going to return to sculpt slots. So return this sculpt slot and a default, which is a method that we can call passing an object with arguments that we want their slot to have available our properties, which we will be able to use from within this slot. So the 1st 1 we want to pass through is disabled flak and this will come from this is disabled. Then we are going to have processing this processing and lastly, we're going to have a trigger method. But rather than passing the instance off the trigger method, we going to pass this conditional trigger. So this conditional trigger this way, every time someone clicks on about and this trigger method will be called, it will actually refer to this conditional trigger by first checking whether they're Barton's county disabled. And if it is, it will do nothing. Otherwise, it will call the trigger on a given component. Okay, so that's everything if we now save it and re compile everything within our terminal. And once everything has compiled, if we go back to our editor because the other thing that we need to do now for us to be able to access these properties, we need to use that slot scope our tribute and using destructing assignment, we are going to gain access to those properties that we passing through. That's just split screen here. Hide, browse on the left inside, so we'll have disabled as the first item. Then we have processing. And lastly, we have trigger que no if it closes trigger file. Let's put these items on new lines. So starting with the disabled lets out this class economically, so colon class disabled it will only be shown, and it's wrap it with the rockets. It will only be shown when the disabled, IHS said to Chiuso Disabled disabled class will be applied to this element when the disabled property said too true. Then we have a trigger which we accessing already through from within this slot and the same for the processing. We now save it and preview everything and browse the refresh. The page would still have a bunch of hers about thes are now referring to the other two bottles, which we didn't refractor yet, but you can see it was submit buttons now displaying he have a hit. If I click the button, you'll see we get the action executed. Refresh the page. It goes back to where it wants to go back to the year. It's a one. Other thing I want to do is to Aunt VI cloak to it to make sure that this button doesn't show until the component is ready. Now, if you are using Internet Explorer or any other older browser than assignment is destructing, assignment may not work, in which case you would replace it, rather with the rather than with the object, just with some sort of property that you can access from within a slop. So let's call this one props. And now what we need to do is prefix all these properties with this prop. So props disabled props Treeger. And the same goes for this props processing. Now this will work with Internet Explorer and any other all the browser. Okay, No, that our component is completed. We can copy this contents off the first baton slot and let's go down to our other buttons. Firstly, we're going to do is remove this resetting CSS class, and that's in line it all. We can actually do this on the first button. Let's just go back to the first button as well, because we are forgotten to remove. This is Submit property, which no longer exists on this component, and, yeah, looks a little bit cleaner on Let's based on what we've just car beats on. Let's fix the indentation for all these elements and he as well. There we go now and this one has a doubles alert class. All right, button with all the same properties. The only thing that we're going to replace here is this reset label with the icon, and we can remove this template. Let's copied this and paste it into this second Barton. Let's remove these things first in line it all. And if we based it in this one had warning button class. And now the label with the icon clear. Let's roll. Dissembling Okay, if we save it and preview everything actually, before we do this before prevailing anything in a browser, Not we have disagree Cloak, which is all good, but actually it's very cloak rather having this on our way slot. Let's put it on the component directly. Eso Let's do it like this so the component actually doesn't show until it is ready. Okay, let's refresh everything in a browser. You'll see the buttons. I know showing submits, submits, reset, resets clear about clears. Everything works the same way as before, but now we have the flexibility to have it. However we want this, there's nothing that comes from there. Component itself that will actually produce the visual representation of the button. So weaken format. It, however, want Let's say we want to change it to a button. Let's just change their Barton talk Barton, and it's going to be, say, type Barton, and that's going to work as well. If we go back to the browsers, can see the button steelworks and regardless off what sort of talk or styling we are using on it, I'm just going to reverse it back to what? Iwas. So the truth is, it is a little bit more verbose. As you can see, we have a few more lines off coal tm fume all dogs and so on. But at the end of the day, the flexibility that it gives you, I think it's it's worth it. That's what I think. If you want to, obviously you can still wrap it within another component. If you don't want to see all these spans and so on, I'll keep it this way because this will allow us to play with this. However, however we want, even if you want to have anemia cheer, for instance, you could punish We have an image stock, which you click and that submits the form. OK, so that's our buttons. There's another thing I wanted to reflect off re open our brows and left inside. Let's open our base in port now based in port. At the moment, if we scroll up, you'll see we have this rapper CSS style and Robert CSS class. This is what I want to get rid off. And this is because if I open ah, where let's go to Maine and its openness index, I'm going to go to the 1st 1st input that we have. If I apply, let's say class to it and I'm going to say test class. If we now go back to the browser, refresh it and let's inspect this first input. You'll see that this test class has bean applied to it anyway. So in other words, we don't necessarily need to have it because even if we don't have this property, this CSS class will be applied to it. The same goes for the style. So if I was to say style, say background, let's make it black. If I save it and previewed in a browser, they go can see already that it's black behind the input and the stars also applied to this rubber. And this is because the first item within a template will get older properties that you will actually apply to this component. So, meaning any standard attributes that you will associate with any given component will be affecting directly the first item within a template. So let's remove this rapper see Assist Class and let's remove this prophecy assessed on We will need this rapper Aero CSS class because this one is being shown conditionally. Same goes for the validation we need. This rapper Aero CSS style also is also neither because this is conditional but their default ones we don't need. So what I'm going to do is now reflected is computed rapper CSS Class. We're going to get rid of this first array and we put it all within this object. We only are interesting this in Violet's and these aero CSS class. Same goes for CSS styles. If we just replaced with just the object like this and removed everything else and we could also in line this one here. So let's just do that and doubts everything in terms of her factoring this base inputs and If you know, save and close everything. Let's re compile in check If everything still works, fine. And there are no errors, which is goods. If we heat sub me, that's good. Reset resets and clear clears. So everything seems okay. If you'd like to find out my about you sculpt slots on Navigator View J s dot Oregon left inside on the components in depth slot sculpts lots. And the other thing you might want to check is the render functions, which is again on the re usability in composition. Orender functions NGO sex. If we scroll down, you'll see slightly different approach to the render methods they are using create element , which is also another way off dealing with the rental its components. However, we went rendering any rapper. That's why I've just use cold snow directly 30. Multi checkbox trigger: In this episode, we will build the trigger component, which will take care off the selected chair boxes Massacre for select whatever. How many when we click that button, what should happen with the Let's go back to the editor Under the trigger splits creating you view components will call its multi checkbook street eso multi check box trigger. And inside of this component, we removing a template because we will extend. We will use our trigger that we've reflected in the previous video as a mixing. So import trigger from how are we going that same directory trigger? Let's art. It doesn't make sense. So mixed sings Trigger. We will also make use off the Ajax Collison import Ajax Kohler from and we Going to Levels Up Make Sings and Ajax Color. That's Ardito mixes as well. So Ajax Scholar and the last mix and we're going to use I'm just going to duplicate this line and replaced the name wait malty handler. And that's also is a mixing. So malti hunger Now for the properties. We are going to have behavior because we want to know what's going to happen once we receive the response from the server and the type will be string and required. Flack will be set to false because sometimes we may come across a situation when we would like to get the behavior based on the submitted import, and in that case, the behavior will be returned with the response. So that's why to start with we going to set it two false for the required. So in other words, you will not be required to provide this the value for this property down. We're going to have a listen. Property. Now listen, property if we open our form, imports, imports, checkbooks and we have our muster checkbooks. You'll see this one is another component that makes use of this multi handler. And if we open multi Honda, you'll see doubts we reduced the cast homelessness and we actually using the property. Listen, we didn't declare this property on the component itself, which means that it needs to come from their component that actually makes use of this multi 100. And in case of our master checkbooks, duck comes from a base input because base in port has this property declared. So now if we go back to a multi checkbooks treated, we obviously would have to add it manually. So let's art. It has type, string and required sets to false. No, because it's false. What we should do from multi handler is the first check if this property actually has any value. So we check if actually it's do the opposite. Let's check if it doesn't have a listen or if listen, doesn't have any value associated with it, then simply return and don register this listener and that same applies obviously to their input. If we go back to our master checkbooks and check base import, you'll see this lesson properties also optional. So let's go back. So Emel to checkbooks trigger Now how? The next thing we're going to do is to is start with the computer properties. We don't have any data within this particular components or computers. And what we needs ease for our Ajax car left. We need this request data. Just copy this property and from here we're going to return an object with items index and this will return the items from within the multi handler property that we have within the multi hunter components. This items all collected items now from within the methods. We have the evaluate one. If we go back to the multi handler, we have this evaluate. Stop here when the event is being triggered. Then what do we need to do after we've actually removed all our that's items to the collection? So the evaluate methods of are you ate and this method will simply said, this is disabled flack to either false or true based on whether we have any items. So this items length triple equal zero dan next method will be trigger. So when we click on the button, this method will be called and this method will simply make Ajax cult. So this make Ajax skull and we passing this coal successful and otherwise this Cole failed . Let's now off both of these methods. So we'll start with coal successful, so call successful and it will take a response. And then for the coal failed, we will receive an error. Okay. With coal successful, we're going to try and then Koch an arrow. And if we catch a narrow what we want to do issues, error, handler, show error and what we going to pass through as an object will be message saying involved form behavior. And then let's just put the name off their behavior. So response, data behavior, You're there. We go and we can coordinated weeds, double quotes and a single quote in between. And let's put the full stop there as well. Okay, so that's the message we're going to show. And then we also need to this stop processing Ajax Co. To make sure that if we have any buttons, obviously with the spinning icon like this thesis, change back to where they were originally and from within the try statement, we're going to use a new class behavior. We don't have this class yet. This is not the same class that we use for the form. It's a different one. And on this behavior we're going to try and call dead behavior methods of this behavior, which is associated with the property. But if Onley if this one exists, so if it exists, let's use it behavior otherwise used the behavior received from the response a response data behavior. And if that method exists and call it wit, passing instance of itself as the first argument and then response as the second. Now, if it won't find the method with the name associate with behavior. Then the year is going to be thrown, and obviously this is where we're going to catch it. OK, so that's our own successful method. Let's now move to their coal. Failed from Coal. Failed was simply going to use error. Hundley as well learn, and we call show era with the eras the first argument. And then we're going to also provide a cold back what we wanted to Before we show this era . Let's stop processing Ajax school. And before we do anything else, let's import this class, actually create the class container. So that's going to be JavaScript. Just behaviour. Let's create. It's an export default class behavior, and for now, we're just going to leave it like this. And it's important here. So import behavior from same directory behavior and that's now available here. Okay, Another thing is, when we click the button, we want to disable it as well, and any associated batons any buttons that are belong to the same group, so we don't click one button than another button to execute two different coal box. So we're going to start with start processing Ajax coal event which is available to us from within the Ajax calamities in another method that we can attach to the coal When we actually calling this make Ajax Co. And from here what I'm going to do issues. Event a bus and we go into coal methods. Fire Defy an event disable started. Hi, Ivan in Concord. Innate with the groupings of glass. This group And when we finished, then stop processing Ajax Coal event he are we going to fire the event event bus, fire, disable end it and again contaminated the group name. So we know which group we refrains. Okay, And that's that's, um, in the next video. Let's have a look at this behavior. So we have all these behaviors ready for when we actually trying to use this component. One other thing we're going to actually do before we finish this video, we're going to do the check in a trigger because some off their triggers may no need Ajax calls. Some of them will just take the input and redirect you to another page. Like, for instance, if you want to export some data, we don't really need to make an age of school and then wait for the response. We just take the import and redirect Boozer to the other page. So we're going to check if behavior and it's there's going to be a method which we don't have. Yes, ISS known Ajax and we passed this behavior as an argument. It's you are is it? I have I used Yes. If behavior is not a Jackson, what we want to do, it's simply call this behavior and in methods straight away on it. In this case, obviously we know going to receive behavior from the response so it will have to be associated with the behavior property, so behavior so that method and again the same thing. This. And this time we're going to pass just items rather than the response this items and then we heat return so that this make Ajax. Cole never gets executed in this case. Okay, so it's safe and we can close this far because that's everything from within our multi checkbooks trigger. And in the next video, we'll have look at their behavior class 31. Trigger behaviour: Let's not have a look at the triggers behavior class. First method we're going to create here will be called Is non age. Axel Static is non Ajax and we'll get the behaviors and arguments will be, Hey, Veer. And here we're going to return. We going to have an array off different behaviors. In this case, it will only be one. But with the time you may have some other behaviors, for now, it's going to be just method called Go to. This will be representing one of the behaviors, and we'll check includes and their behavior that we got through as an argument. If this behavior is included within this array, then that means it's a non Ajax cold. But now, rather than returning in Ray straight, we're here. Why don't we just extracted to a method so static? Let's say non Ajax and Dan will have it separated. So we returned on which tend this ray and now what we going to do issues, behavior and non Ajax, and then includes. So we don't have to modify this method. We will just up items to disarray off this specific method here. Okay, so that's is not Ajax now next static behavior. This I'm method will be called Redirect Redirect, and it will take trigger, which is the instance off their given class. In our case, it's going to be more detailed. Books trigger here, if you can remember, we're passing instance off itself and in the response so trigger and ended response is the second argument, and here will simply go window location A treff equals and responds data you are l. So that's where we going to redirect the user when they've clicked and we received the response from the server. The next one will be static also, and this summer going to be reloading the page. So reload method We don't need any arguments even though there will be positive but we don't use them. So we don't have to specify any than window location Reload. And yes, we want to take a fresh version off the dome, so reload with the true as an argument and the next methods will be called gold to so static go to and it will take a trigger and then Daytop And now trigger, as you may remember, will be instance of our multi checkbooks trigger, which extends Ajax Kohler. And on this Ajax color, we have a method property which by default, is set to post so from within his behavior, what we can do is check if trigger method triple equals boast. Then we're going to delegate the cold toe. Another method, behavior and a new method will be called goal to boast on. We passed trigger through as an argument as well as data received. Otherwise, we are going to call it very similar methods, uh, which will simply be rather than post get. Okay, let's create both of these. I'm going to start with gets so static go to get and we get trigger and data and here will be going to this window location. A trip equals n re going to go for trigger Auction Con coordinated with a question mark. And now we need to convert the data, which will be the items that we actually passing through as an argument because this is a non A jugs method to get one. So we getting items we need to convert them to the get request, the query string and in order to do is we are going to use a helper, will about the methods you can see this says automatically be important by my I d. So make sure they imported as well to this class and method which will up There will be called Array to Query String, and we go into palace data and then trigger name as the second argument. Let's copy the name of this method. Let's open our coral and help a class, and it's out this method right to the bottom. So static array to query string and it will take and the ray I'm going to call it collection and in a field name I am from within this method, we're going to return our collection mopped with the callback functions so value as an argument and an arrow function. We will join all these separate elements with the the and Symbol two. Obviously build, acquire string now return from within them up for each item In this collection, we're going to use the field name con, coordinated with the air, a symbol and an equals because another item in the array we needs to an cult each item so and coat you are I component and then the value. It's an argument so make to make sure that if there are spaces, they are properly encoded. So this method will return something like this. If let's say we have an array off one too. Three, this would return something like, Ah, string one Wrong, wrong, wrong, wrong, Wrong In the field name would be fine since items, items, array equals swan, then concatenation. I'd attempts Ray equals two and so on. So that's what we would get for the choir stream. OK, so that's our array to query string methods we can save and close this helper class. I would go to get method is now completed. The next method will be go to pulse or static go to boast it takes trigger and it takes data as well. Now with post or what we need to do in order to get the input and redirect user with this input using post method, we need to generate form field. So first of all, going to have a form, then generate input for each off the data item that we want to send with the request and then send them over there. But it is just some meeting the form. So we're going to start within your valuable soul. That form equals document create element and is going to be formed, talk and let's know, appended to the body. So document body upend child and is going to be form. And now we're going to specify the method for the fronts of form. Don't method equals supposed and we're going to have formed adult auction equals trigger auction. And again, this is coming from within the Ajax color. We go back to the Ajax color we have the action is the property. And now the next thing I need to on because I'm using a lot of l Is there CS r f talking? So I'm going to check if window C S r f dull kin Then we're going to audits of behavior input method which will aren't in just a moment which will generate the input form to which we need to upend it. The name which will be token in this case. And then we're going to take window C S R f token. So that's going to be one of the inputs. And now we don't have the CSF token on the window. But if we open our bootstrap, you'll see that we actually obtaining this from within the Met attack and we are associating it with the axes, default Heather's property. So what we're going to do here is pretend it with window C S R F token equals and then obviously the same statement as it was before. So in one go, we're going to set the global CSR of token on the window as well as provided for the access purposes. So save it. So that's not going to be available here. Then the next thing we need to do is for each of the field we need to art them as well for each off the in boats that the eight are items we need to our generate the input as well. So for let value off this time data and let's use behavior. We go into your input method again for this form, and the name will be trigger name Con coordinated with the just put it because it's going to be in the ray symbol and then the value we want to associate with this import now using for off lope the value represents the actual dates are item off the given collection rather than the index, which is the case with the fall in. That's what we can. Positive values trade in as an argument. Now, at the end of all this, once we have other form and all the fields included. All we have to do is to some uniforms off form. Submit. Now we are still missing this input method. So let's add it. Start IQ input. We take the form to which we are pending. This input, then name and the volume. And here we're going to start with any variable. Let me just scroll up a little. I'm going to create a few new spaces sites going up a little bit. Let's input equals document, create element input. We are going to use this input now to set the type of it to hidden, so it's not shown within a page and an input name. We're going to say it's going to be whatever we sending through as an argument. Then we have input. Value will be whatever we pass throughs, an argument as well, and then form. We append to it this newly created inputs or upend child, and we pass input as an argument. Now let's remove this redundant spaces Bolton and we can save and close this fine as well as this one. Let's open our event, Vance, because I want to do a small growth factor here. We're isn't for in and we passing the index to either fire. Listen event and then we pulling. We are pulling the value bites in the index from within this events collection. Now using for off, we could simplify, decided a bit. So let's just do it for off and no other than index. We're going to have value right now and let's now change this index to value. And rather than pulling this from the collection that just passes straight through so value girls as that OK, same here, value bus on. It's going to be just volume, just a smaller a factor which is making things a little bit easier. Okay, so if we save and close this file, the next thing we need to do is to register when you components. So let's open components, the GS and after our for intrigue, I'm just going to duplicate this line and change it. Teoh multi check box streak s So it's going to be malti check box Treeger Lots coming from a triggers. Morty Checkbook Street. Okay, save it and close it. And let's now re compile the assets. NPM Ron Deaf And once everything has compiled its go back to the year it's on, Let's open multi checkbooks index that blade on, Let's crawl right to the top. We're going to now art this multi chapel street. It's a mold T check box trigger, and we are going toe other few properties here. 1st 1 will be the group, and it's going to be mold t checkbooks down. We're going to have a disabled attribute set to true, because when the page for his loads none of the check boxes is going to be checked, then we're going to have behavior that I want to use with this particular button will be reload. Next Listen property, which will listen for the select single event that's fired by each off this individual inputs, then the last thing when it is the action, where we going to what we are going to be calling, so auction equals and we have a root here. Ready, which is small T check box, uh, check box and his destroy fruits And now for the button itself, we're going to use a spun with slot scope of represented by the props property. And then we go to the class on is going to be alert. Button down will have a class disabled Applied's when the props disabled is set to true. And then on Click. We want to handle this with the props trigger method. Okay and within the Spawn will have another spun with Claire V. If statement will check if props processing is set to false, then we want this label, which will be there. The I come with a class fast, far times for F W and the label from off. Just duplicate this on change it slightly and otherwise. So v else will have the icon spin her Spino with far spins. It's rotating and and label is going to be pro. So sing okay, save it and let's go back to the browser. Refresh the page they would go out. Button is disabled Now, if I select any of these items you can see becomes enabled by selling them all is well. If I uncheck them off this one item unchecked, it also goes to disabled if I just checked one now before I actually clicked about. Unless move it to the bottom so I can actually see the network and calls. If I click on this, you can see the button to destroy. Endpoint is being called. That's been send page reloaded and their confirmation displayed. That's working fine. Let's now go back to the editor and on the other button. So I'm going to duplicate this, and this time we have a disabled set to True as well. But we going to provide the name for this one, which will be case name records, because this is the name that's going to be used. Weighed the choir strings are all records will be sent as records array, multi check boards. That's fine. Behavior this time is going to be go to a single, select and rather destroy. The end point is going to be export now for our slowed itself. We keep everything the way it is now. Rather than remove, it's going to be export label. And rather than times Aiken is gonna be Donald, and a spin is the same. Okay, save it. Reviewed in the Browns that refresh the page, you can see how the color of the button we could change as well. So let's just go back around having alert we're going to have a success. For instance, let's go back. Refresh. Now it's growing. If we now select all of these items, or just a single on the same is with the remove button, that's all working fine. I'm going. I'm going to select all of them. Click on Export That shoot. Redirect us together with the inputs to the new page, using the pulse methods, a click on export. And if we select all rather than just X HR requests, click on expert, you see done. The request meant that WASP housed in what we've send was records array with 12 three. That's what's being displayed within the browser window because that's worlds I've set. It s from within the controller after a lot of no one other thing old life to happen. If we just go back, it's a When I selling these items, you'll see that when I click the remove button, I can still interact with them wild. That request is being processed. That's not quiet. How this should work. So let's go back to the editor and I'm going to change. What we are going to do is rub this table, which has all these checked boxes with the form robber. And this form rapper would have a group which will be the same as thes multi check box triggers, which is this multi checkbooks so we can group them together. Just join this given form with this with both of these triggers. Now, if I just do the indentation here and it's close it right behind his closing table, talk for the table, I'm going to apply slot scope and again, we're going to use props here and all I need to do now is to art disabled. Our tribute to each of these checked boxes so disabled and it will equal to props is disabled the property on the form robber. When we click on any of these battens, it triggers the event to disable given elements which are associate with the same group. Their form will listen to this event and it will disabled Set its property is disabled to true, at which point all these strict boxes will turn to be disabled. Let's just apply. It is disabled flock to all of them. 12 and three. There we go. And if we now save it unless preview everything in a browser fresh, let's select all of them. Click on the move and you can see all these buttons are now disabled. While we are processing the requests when the request is completed, they become enabled again. Okay, The same thing of a pride earlier to the main form. So if we feel in the form with some data hit submit, you can see all of these items are now disabled ones. Deformed has really loved it. So the response has been received. Their fields become enabled again and again. A few things we've touched upon doing these episode One of them was array mop methods which you can find at the developer. Don't mosey little orc. And then we also used and cold you are I component. Then we also use creates element off the document object as well as a pent child to denote 32. Radio button: it is not a time to have a look at the radio about now. Radio buttons allow us to make a single selection off the multiple choice under the import director. Let's create a new file and call AIDS, going to call it simply radio adult view. Now, before we do anything else, let's open our components and let's registered this canoe components So we're going to use a view component. I'm gonna call it radio input and we will require. And again we're going to go to Source direct treat and components that we have form inputs in Port End radio. No, we need to make sure that we obviously required default expert from this farce. All the fault. Okay, now that it's audits to our view components, let's go back to our radio. Finally, we're going to start with the template. We go for DIF with the V show when the show property said True, then we have again class all those things that we have all other components computers, rapper CSS class And as you can see, my I d doesn't know where to pull it from, and this is because we haven't actually important based inputs or import base input and it's gonna go from we go my level up base input. And now we need to obviously make sure that this mixing is being used. So make scenes within the array base in blood and now distributed rapper CSS Class is available. So for the style, same thing. So style equals computed rapper CSS style and adults it for the wrapping different than we have dif with V four. We're going to be looping through the options so option in options and our options. So if we just go back to the base input, we have already this property here and options will be what we are going to pass to this component for the least off radio batons. So, through the options as option, that key will be option I D. And then class will be check box group item. That's what we have in our stars. Then we're gonna go for the imports and input will have a type radio. This time we will have i d coming from the option i d. And we pass option as an argument. But because we are going to be calling this method again, let's just create the valuable nego. So option underscore idea and we use it later on. We're gonna need this the same value within the same look. And the name comes from name property. We will have disabled coming from disabled. Then we have about a complete coming from outer completes. Then we have value which will be represented by the option and its property value. Then we have for the model. We will have the proper tickle to checked and the last thing on change What we want to do, we want to update called the method updates. Okay, After this, we're going to provide the label and label we have for option I d which we created on the go here and then the if we only want to show it when option name is present and V text will also be option name. And that's our template. Now, if you scroll down, we won't be using any properties. Then we have this checked the property, which we will represent our model. It's actually with d l. At the end. There we go, and by default it will take the value off their car and fighting. So this current value whatever we pass through as a current value to this component then will have methods. But before the methods, we're going to have mounted. And when the components mounted, we first check if this checked. So if there is value associated with tracked, Daniel will meet it. So this and meat and we passed this checked value so that our form and will now have a value associated with this radio button, okay? And then we simply initialized or this any she allies. And we also need to register listening. So this register ah, listeners. And that's everything from within the Mount it now for the methods we need to provide the implementation off the reset clear, and then we go into override the update. So for reset, we will check if this current value, if there is a current value, then we go into meetings on this and meat and we go for this checked, we going to say, set it straight away at the same time as we actually meeting it to this current value, and then we return because we don't want the statement to go any further than that. Otherwise we simply clear their selection off this regular so clear, let's know, provide the implementation of this clean methods so clear on a clear methods will simply set this checked two false. And then we are going to fired events or event bass fire. And there the event name will be removed field, and then we can coordinate it with this group and the name of the field. So this name So our form rapper will then receive this event and will remove it, Remove this particular import from their least off fields. Okay, the next methods and the last one in this component will be the update. We take the event because when we when the event happens on this given improved this change event, that event is passed through as an argument on what we're going to do from within. This a date is simply a meat as well, so meat, and we're going to set checked again on the go two event target value. So whatever valuables associated with the given radio input, that's everything within our component. Let's now open our view files. So we go into views, we have Maine and index don't blades, and I've already other this radio input you can see about a new field set here and wrapped it with the DIF with a class checkbooks grouped. That's just for the styling purposes. Then we have validation outside off the radio input because of his validation for the group off Imports doesn't have to be associating with a single input. It's going to be for the whole group. So validation, I d name, show and obviously all those things that was already used before and then for the radio imports. I've provided the options, which consists off the name and value. We have a model which goes from props, fields and city validation. It needs to be one of the following values. So 123 and six which are represented by the values off these options and then for the kind value, offset it as three. So for gold to the browser. Actually, before we do anything, lance, let's re compile. Define saw npm Ron deaf. And if we now privy everything the browse, refresh the page, you can see we have our radio button. See Africa to the former brother. And that's just feel, too for Fields. That's what we need. Let's see, we have CTS three for the monitory. Then we have parties changes to two and so on. But let's not try and go back to our editor and if we know, remove the current volume, just going to commend it for the time being. And if we go back to the browser, refresh the page, check and see if we just go from rap again. Fields. You will see that we don't have any input with the name City at the moment because none of the options selected by the moment I'm going to click one of them. You can see City has been at it with the correct value. Associate it now. One thing. If I refresh the page, you'll see. Not if I submit the formula. We don't see any validation. Listen, and this is because if we go back to the editor, this particular able is not required. We only wants to check whether the value selected when it selected is within this parameter range. So it's either 123 and six, but it is not required. If it's not present, then we're not doing any validation. So the first thing we need to do is to aren't required to this If we would like to require this one sort of quiet for the validation because we have validation outside off the target self. First of all, I made a mistake here. We don't need this parliament, as we only need to indicate which rule we want to display the message for and the same goes for the one he ever the colors again, minimum and maximum. We do specify what minimum and maximum should be on the input. But within the validation, we on each are interested. Which rule has failed? If we scroll down now, we obviously the message for this required. So I'm just going to put a comma here. And before this, I'm going to put required So for this rule display this message for this rule when it fails , displayed this one. Obviously for this particular labeled they both will be the same. Give me, Save it and go back to the browser. Now refresh. And now, if I heat summit you see now we have police select your CD. Obviously that is now being validated. So we have now completed the radio button in the next chapter. We going to start working on the select inputs 33. Single select: in this chapter, we are going to Covas Select Inputs under the Inputs director. Let's Creed and you want specifically for all the select so we're going to have select and the first type will be just a single one. So we are going to create a new for view file Cold single dot view and inside of this file before we actually do anything. Let's just go to the components and registered. So I'm just going to duplicate Last line separated. So we've got check boxes and radio buttons together. And then when all this Salix going to get as well, so select uh, actually, let's call it single, Select And it's going to come from within the imports than we have select and it's going to be a single one. OK, for now, saving close this file from within a death single dot view. We're going to start with the templates, which is going to be pretty march. The wrapping content is going to be pretty much the same as we have for many other inputs. I just copy and paste. It's your old familiar with this by now. Then we're going to have a slot for the validation, which will be obviously replaceable. If we don't provide anything within the opening closing components talk, then obviously this lot will display what's within it. So we're going to have validation, and this validation will have a label taken from the label property. Then we have I D. Taken from identity property, then will have name taken from name. These properties aren't available yet because we haven't important, actually based in, But let's just quickly do it. So import at base in boots from and again, we're going to go one level up based input and it's just quickly added as a mixing some mixed sings base in boots and now all these prophets saw of album. Okay, so we have named. Then we have show and we're only show when show validation is set to true. Then we have CSS class taken from computed validation CSS class. Then we have validation taken from validation, and last thing is errors. So era equals era property. Okay, and that's our validation, A component inside of this lot. Then we going to go for this select stocks or sell exact, which will have I d off the identity. Then we have name as well. Samos on them. Validation to take coming from there. Name property disabled will come from is disabled We will have out or complete coming from outer complete all those different things that we have with many other inputs. And then we have class taken from input CSS class. Then we have V focus. We want to have focus on it when the focus property said too true than V model will be called selected and down will have on change. We want to call update method. Okay, so now in between the opening closing select stock, we're going to go for the first option which will be the place hold then it will only show So if placed all these available So place hold a place. Holder said the true if it has any value, then show it and V text will be represented by this place. Hold as well for value. We just said it to nothing. Just just an empty value attributes. Then we're gonna go for the option and we're gonna have the for We got to be looking through all the records, all the options. So option in records. We are going to create this property Just a moment. We have to have a different one rather than actually looping through the options because they will be modified. Genesis chapter, we won't Onley have single select, But we also have multi select and we also have dependable selects dependable drop downs. So that's what this, this records property will actually feel to the records accordingly. Okay, so have V for option in records, and then we're gonna have a key key will be represented by option value, And then we have value also represented by option value. And after this, we have V text, which will be represented by option name. So this is our template. Now, if you scroll down will start with the data. First of all, we need only model, so it's going to be selected and by default wheel set it to whatever the current value has been sets to so current value and the other one will be records by default. It will just take options, property, whoever's associated with the options property. Okay, Next thing, we're going to have a mounted methods which will first of all, the meat, whatever the selected model has associated with it, so first and meet this selected. And then we go into initialized and you should realize. And after this we have register listeners. Okay, Next, we're going to provide the implementations for reset clear in update So reset. When we reciting, we were first checking. If this current value is set, then that's what we're going to say. That too. So this meat this selected we are over writing this with this current value and also I'm eating it. And once, obviously the current value has been selected and we've done this. We can just hit return because we don't want this. We want this statement to terminate. And otherwise, if it doesn't have current value, that means that we have to clear it. So this clear After this we go for clear methods, implementation and this meat and just just this selected and we set it to an empty string. So we set into empty string and we also meeting this hour rapper. Then we have the update methods. It's all very similar. Told the other imports stabbed the differences. Main differences are naming off there off the given model. So we have selected in the other one. We had checked and that sort of things this a meat just this selected. So whatever values as we should with selected property, our model within this component just made it to the outside world. Okay, And that's pretty much it for the single select within our form. I'm going to leave this props property here because we will use it in the following videos for the dependent drop downs. I think we can now, Rick a pile of the assets certainty and round deaf. And once all this has Brick compile, let's go back to the editor. I just want to show you what I've added. I've added already this single select all this standard on tributes plus options where we have name and value. Then placeholder focused, set to true because going to be the first input within our form in this case, Obviously, I need to remove this focus from the following input. Then we have the validation for required, and the selected volume must march 1234 or five which are represented by these values in our collection. Okay, if we go back to the browser, you'll see that we have a title select Norfolk heat summit. Always nothing selected. Validation pops in. If we select anything that disappears. If we got for the form, Robert, let's see what the fields have. And within the fields, obviously the value title there we go to if we change it toe, Mr. There we go. That changes if we change it to please select one to the placeholder. Busy doubt empties their value for this particular index. Okay, so that's a single select input. In the following video, we are going to start working on our dependable drop down menus. 34. Dependable dropdown (Part 1): in this video, we are going to build the first dependable drop down menu, the 1st 1 which will not be using Ajax. We will pre feel all the options for each select when the page for his lots. Now, I've already added the structure for their index plates under dependable drop down. So we have a first select, which will have an array of options. This is the 1st 1 which will be enabled by default. First selection will be made from this select ones. The selection has been made than the 2nd 1 which depends on this. 1st 1 will display relevant options, and, as you can see, the 2nd 1 rather than array uses the objects their properties, the keys represent descent, the option from the previous select, which means for one we're going to have small and for small. Then we're going to have green, orange and yellow for medium. Which value said too true, we will have blow white and black and for the last item will have silver, brown and pink, and the same will apply to the falling one, depending on what option will be selected from the color. Select a single select that will dictate which options will be displayed in this last third drove them we had, we will add the depends on property, which will a contain the value selected from the previous select. So before the 2nd 1 we are looking for the size, which is the first select for the last one we are going to be passing depends on the value from the color field. So let's now go back to our single view file and let me just close their eyebrows on the left. And if we scroll down, I'm going to out there first Property, which will be called it depends on. And this is when we actually going to obtain the value off the previous select so type by type, you can leave it off. I'm going to only allow number and string, and then it's not going to be required. So required, I said to false. Then the next thing I'm going to do a records rather than having options straight away, I'm going to set to an empty array, and after this within the mounted before, I actually will Emmitt anything. I will call the new method called Fetch, so let's quickly out this method fetch and what this method will do. First of all, we will check if our options is off the objects type. If it's off the objects time, we know that this is already dependable. Drop down. It's not the 1st 1 that loads were enabled. It's going to be one that actually depends on the previous selection. So we start with a conditional statement. If Helper Daut ISS object and we're going to pass this options and that means that it's not the first select it's one off the dependable ones. So this records equals this options. I want to get records based on the previous selections off. This depends on and after this were simply terminating the statement because we're not gonna do anything else if I just grow up to the importing, import our help it. So it's just quickly import this one. And don't shoot off the statement. The other we go helper four levels up core and help. Otherwise, we are going to set records. Two options. This options now this Fetch Matt. It should be called every time. The depends on property changes. This depends on property once again is representing the value off the previous select the one that this one depends on. So every time the values being changed in this previous select we have to call this fetch method because different selection will well will require different options for this particulate select. In order to do this, we're going to make use off the Watcher. So section watch and he out. What we're going to do is create a method with which is representing the property. That word into ah watch. So depends on just this way. If we use that value, the new value that this depends on property will have after the change outside of this component, this selected, we're going to set to an empty value to reset this Selleck and then, if isn't value. If there is no value associated with this depends on which means they probably selected the placeholder, which represents empty value for the given select. Then what we want to do is disable this dependable drop them so this disable and we have this method obviously available. If I scroll up because reason based input which in return uses disable and this disable, others have enable and disable minutes case of his girl down. Otherwise, if we have value, if the value is and is anything other than no or empty string, then this enable we're going to enable this import and then will fetch data so fetch to make sure that relevant options are being presented to the end user. And after all this, we're going to EMI Device Meat and this selected Okay, So now let's re compile everything and let's try it in the browser. So if memory compound my assets, if I refresh the page, you can see we have all these three depended with drop down menus. If I just got from Robert just to see what we have fields that we go at the moment, nothing selected. If I select size small, you can see the size values being associated with the property. And then, obviously the second drop down becomes enabled. If I saw like the grinning, the 3rd 1 becomes enabled, and obviously color is also being added to the fields. And then there last one couple and there we go. All the items aside Now, if I reset any of this looks like the 1st 1 you'll see that all the other ones are reset and obviously they are now the Zabel's. So if we go for medium now, we're going to have a different selection. If I go for large, another set off items is being available. So brown and W so that's one approach when we provide all the values for the select imports when the page for his loads. But most applications will probably use Ajax approach, meeting that when we make a selection from the one off the select inputs, the Ajax Coal is made to the server to obtain values for the next one, and this is exactly what we go into Kovar in the next video. 35. Dependable dropdown (Part 2): in this episode, we are going to tackle the select which makes and a Josko. So first of all we need is the Ajax color, which we've created. And yes, so we go into imported Ajax Golar from, and we go fall levels up and we have mix ings and then Ajax color. Now that's about it. So it makes things next. We need to have the property cult fields which will represent the collection off all dependable select. So if we have three select for the dependable drop down menu, then we will have all three of them. Within this Fields collection, they will represent the index and the value associated with it. The type will be object, and default will simply be an empty object. Return empty object. So if we go back to their view, you'll see that I've already created there the next form on this page and you can see the 1st 1 doesn't have it, because 1st 1 will have all the sizes pre populated when the page for his small So we're going to pass them through and to the options property and the other ones will have a string representing the end point where we want to make a call. So in this case, these options will not be an object. It will actually be a string, and the fields will represent all of the dependable and select. So we have size for size for color. We have fields color for brown. We have fields brown. So these this is what we are going to be passing through with each Ajax skull. So when we actually send it to the server on the server, we can figure out what should we return? What items should return with size and color has specific selection. Walt, should we return for the brand? And so I guess if you go back So after we've added the fields, the next thing I am going to do is create their computed section. So computed and computer toe will have two properties and point, which is being used by the Ajax color and the endpoint in this case will be this going to return it. This options this will only be used when we actually using Ajax options in this case will represent the string representing the end points to which we actually want to make the Ajax call. Okay, then the next one will be request data also compute the property from within the age escalate. What we are going to be sending with each request and what we are going to be sending is going to be an object with the i. D. Representing this name. So we know which field is making the call. And then items which will represent all of the fields that feels that we have. He has there property, but we're going to use object. And we are going to a sign and this fields. So we taking all these fields, but also over right in the value for this particular Salix of this name, which will give us the name off the given select and then this selected wherever we actually have selected after we've made their change on when we making the call because of fields may represent the old data by the time we actually making the selection. And we want to make sure that we have a fresh, select value sent with this request. Now, if we scroll down and look at our fetch at the moment, we are only checking if options an object. Now, when we making an Ajax Coal when we fetch, and we actually have to make this call to deserve it. So we're going to check if type off and we're gonna use this options. And if it's is off the type string, dot means that we are expecting a call. So to the service of this, fetch Ajax and then we heat returns. So nothing else happens after this would terminate statement. So fetch a Jackson's create this methods right before that reset, fetch Ajax from within this method. What we are going to do is check if this is disabled. Dan, we don't want to do anything, so we heat return. Otherwise, what? We're going to do this, make Ajax cold, and we are passing this coal successful. Otherwise, we're going to pass these coal failed. And let's create both of these methods. Scroll up first call successful when we refer, received response from the server. What we want to do, we would like to first of all, stop, uh, processing Ajax Coal. So if we have anything going on some sort of rotations, animations or anything like this, we want to stop them. And then this records we associate with the response data records dance the index that I'm going to be returning from the server. If I look at our controller, you'll see that what I'm returning with this college records and summary seminar will be using the following video. For now, it's just records, which will, if we just go to daytime checks, what I d. If it's called by color, then it's going to be returning color date hours, depending on what size was previously selected. And then obviously we have specific case for this in the data will be returned back as records index. So if you go back, doubts our own called successful there next method we need to create his cold failed and this method will receive an error. And as before, we're going to use their handler, which is bridges that globally show error, and we're going to pass air as argument and then this Stop processing Ajax Coal to make sure that this is executed before the air is actually being shown. So if we now save everything and re compile the files, so if you were a fresh page, you'll see we have this new form. Now if I select the size, you'll see that we making in Ajax Co. Not has returned some data and populate the core menu. Now I've made another selection, another Ajax school, and bronze has oldie available options. But if I select from the last selects, you'll see we know making an age age X school. This is because if we go back to the editor, you'll see that we are only fetching, calling this fetch method from within the mounted method, which is only happening ones and then whenever the depends on value changes because their last select doesn't have any other select. That depends on it. That's why normal Ajax co calls are being made in the next video. We're actually going to art dysfunctionality because sometimes after the final selection, you may want to display the price. For instance, if you are working with the e commerce website, you have to have all select selected in order to be up t to be able to obtain the price of the product. So this is what we're going to tackle in the following video 36. Dependable dropdown (Part 3): So in this video we are going to have a look at how to make an Ajax Cole with the last select in a group off dependable dropped domains. Now off already at its another form which will have an additional property called summary. That summary later on will be updated through the last A jack school, after this call has been made this summer will be updated and then we will be able to display some sort of message under the form. Let's now have a look at our single don't view file. What I need to do is to add another property here, and this property is going to be called is last. Now this property will be off their type bullion, just indicating whether the given input the given select is the last in the set off dependable drop down menus and by default it will be set to false. Now, if we scroll down and if we find our where our cold, successful methods once we have associated the records with what we received from the Ajax School, what I want to do is check if response has inside of the data block the summer index then what I want to do. Issues, event, bus and fire. The event called update summary and we go into concatenation with this with the group name . So we saw the rapid know which group doesn't belong to and then just sent this summary with this event. So response date on summary and it's rare sponsor. So we're going to send it to the rapper, and Robert then will update its internal property. Now, don't worry about my ID's hot chick putting this line through this summer because of things that it belongs to a different object, but it's not. It's just the property that's being returned with the age Exco. Okay, so that's this. And one last thing we need to do on the update when we actually selected, because when we make in selection on the Given select, we're calling this update. So here, because we won't have any other child, which depends on this particular input. If it's the last one, then we we need to check if this is last and then what we want to do is called this fetch method. So he's still making this age Exco With the last items off, we scroll down. You'll see that the last select in this set has this is last said to true, whereas the others don't. So when it's their last one and you still want to retrieve some data from a server making the last final Ajax go dance where you will have to do it said this is last two true. Okay, so I wear single dot view file. I was select single select component is now completed. However, we need to obviously provide the handler for this update summer event. So if we open our brother and from within the rapid the first thing we are going to do is to art the new property and not property will be called summary so we can pass some summary into the object straight way, as we did here. As you can see, it was just scroll up off really set their total on this object to zero that I go back to the Robert summer will be off the objects types of objects all time, object and default will be Justin up empty objects. So are a function return an empty object. Then if we scroll down a little bit before the date are we going to art? Internal property Summary back and is by default will be whatever we passed through as the summary. Okay. And if we now scroll down to the created, we need to create this handler, even listener for this update. Summary. So update summary. When this event is find what should we don't? We should call update summary methods. We don't have this method. The answer. Let's just scroll down. And we are going to our that off cell if you just go over and more field. I think this is the place for it. So update summary will contain Will receive a data was an argument. Eso we set this summary. Bach will equal object a sign and what we will do. Here's an empty object to which we are going to put the existing summary. Bach merged with the new data marriage, meaning that obviously, if there's any property on the data, that is also within this the existing summary back summary back one will be over written with the newly received one with the response from a saver and the last thing when we are cleansing, we need to clear this summer back as Well, this summary back when I say clean is reversing boxer, where wasa regions of this summary. So what? We go through a as a property, we need to associate it again with the summer back to make sure whatever we've sent through the Ajax, obviously that needs to be removed and a fresh copy off the summary needs to be associated with the internal summary back. One last thing we need to do in order to be able to access this summary through our slot is obviously too. Aren't this property past this property to this lot itself? There was cops lots. So we have summary which will be represented by this summary back. Now if we save and re compile everything and then preview it in the browser If we refresh and scroll down to a new form, you'll see we have three selects as before. But we also have this message here which tells us police select all attributes to reveal the price. So we're going to select from the 1st 1 the Ajax colors being made 2nd 1 Ajax calls being made, and with the last one, we also should have an Ajax skull and we do. And when that happens, that returns summary with the price. If I change it, it provides a different price. If I change it, he as well you'll see this reset itself. And then obviously, different prices for different brands are being returned. So that's everything in terms off their dependable drop down menus. In the next video, we are going to Taco Multi Select. 37. Multi-select: so the next item will be working on is the multi select To do this. What we are going to do is first of all, duplicate the existing file so co p and we got to court a mall. People and this file the template of this final we will be pretty much the same. Except for a few things. We need to art multiple to this select talk. And rather than looking through the records, we are going to be looking through the options directly. Now these things here will change about that bit. But before we do this, let's open components and that's actually registered this new component. So we are going to have multiple select and rather than single that is going to point to the multiple, not view, save and close this file Now the other thing we're going to do is remove these imports and what we are going to be actually important this time is a multi cell act input the mixing, which we've created early as well, so multi select input and we need to use it as a mixing. Let's remove this Ajax Cola. Now we know going to be having any additional properties. We won't have any data are computed properties. We will have mounted. But rather than fetching in a meeting, what we are going to be doing is calling update method as the first item within the mounted section and then for the methods. The only method that we will actually provide implementation off will be the update. All the other methods can go and the same for the water. Now, from within the update, the only thing we will do is to Emmet de Selected Value. And that's everything. In terms of the multiple component we save and close this. And now if we go to main index plates, I've already added fruit array to our collections on the form rapper because this is where all those multi selects for this particular multi select will be collected as their fruit index. You can obviously create as many as you want with different names. And if we now scroll, ride to the bottom. My last item here is the fruits we have this multi cell equipped with just registered. So we have options. Name and value of value in this case is a string we have validation just required we have current value, which will pre select the banana and apple, Apple and Banana will be selected. And then I've also ordered the input CSS class to make sure that there's no margin between that, the actual input and then the field set. But that's obviously purely down to the formatting here. Okay, so if we now re compile everything and that's preview everything in a browser, if we refresh the page, you'll see our fruit. Multi Select is Hey, are we have two items are pre selected. If I go to the form and let's just look for fields, there we go. We have fruit with banana and apple pre selected, I can de select them by using command and click on the mark. We can select multiple as well single all of them. You can see they are being art it to the collection. If we de select hidden submit, we have required field. This field is required of easy validation, fails if we select any off them that goes off that seem to be working fine. So we are not done with select. In the next chapter, we're going to talk or text area and CK Editor 38. Text area: Let's not have look at the text area components under the imports. We're going to create a new directory and we're going to call it Text Area. And within this director we're going to create a new view file. Cold, exactly, same way. So text area. Now, before we do anything else, let's open components that Js and we are going to a new line. We're going to call this one text hyphen area and it will come from within the text area directory. And if I was also called Tex Avery seven, close it now rather than typing in the template, I'm just going to copy and paste it. Most of the things in this templates are very similar to what we've already done. Ah will go through the differences. But before we do anything else, let's import our base imports. So import base in port from every going one level up base input and let's got it as a mixing some mixed scenes base in boots. Okay, so now we have more property sin methods available to us. Now they're rapper is the same as for any other input. Then we have a slot for validation as you can see I have used named slot, which means it will allow us to put more than one slots into the component, because by default you can only have a single default slot. Which means if we were to put content through the opening closing Tak off this component, we would only be able to put either validation all the content for this input. But because we need both when we need their functionality, where we can actually specify validation and their content for this input. That's why we are using named slot. So we have slot with an invalidation. And if we open our views main and index that Blake, you'll see that I've already added stakes area to the view and you'll see that I also have slot with the name body. I will not put it inside of the template, but I will specify that this specific content this dif and the wort servers inside off the stiff is referring to the slot with the name body. So then I can obtain their content for that slot from within the coat. So that's why we using their names lots here, all the other attributes properties off this validation component you are already for media with. So I'm not going to be going through this. Then we have this text area and again I d identity name and all those default properties. Then we have input. See Assistant, which will be the computer property as well as input listeners which we don't have within this component yet of the input listeners will adjust reacts to all the events on that input. Okay, so, starting properties, we will need just one. We want to say how high our takes. A I should be. So let's specify the high property and it will be off the type string and then default value. I'm going to specified as seven Ari ems. Then for the data, we will have just scroll up a little bit. We will have current body and this current body will check if this slots have a slot with the body name and if it danced, then we're going to use it. So this slots, we going to go for body at index zero, then we want to go for Children at index zero and want to obtain its text. That's what's going to give us the content off this slot with the name body. Otherwise, what we are going to Joe is simply return. An empty strings of this current body will be Justin Empty string. Then body is the model that we going to be using with our text area, as you can see here. So and next thing we need to do is the computer section, some computed properties and for computer products properties, we are going to have this input. Listeners as well is going to create this first as well as this input. See, assess style. Okay, let's start with this input listeners in pointlessness We're going to return object, and we use a sign method, empty object. And then we're going to take default listeners off this listeners and we are going to manage them. Ah, son should be g n obviously, and we're going to combine it with input on import. What I want to do is execute the function which will meet what service associate it with the body in model body property on this specific component. So when the input is when someone's typing thing put, each keystroke will find this meat event end that in return will update the form rubber with the current value typed into this specific component. OK, so that's our input listeners. And then for the import see assess style. What we're going to return will be an object Height will said to this height. So whatever property we've passed through on that component and for the methods, actually, before we do the methods, let's go for the mounted. So when component is mounted on Dom, it's now available. We're going to meet stray away. We associate body property with this current body and we're going to meet it. So when the component loads that stray away meets the event with the value we have within this import and that obviously updates the former up, then we just call initialize initialize as well as register lawlessness. So this register lawlessness and then, for the methods, all we need to do is provide implementation for reset and clear. So reset will be simply this and meet this body equals this carrying the body. And as you can see, we're repeating ourselves because this first line does exactly the same. So why don't we change this to simply reset and then we gonna go for clear and clear will be dis and meat This body equals and empty string. So we're associating the value of this property as well as a meeting it at the same time. So that's pretty much everything within our component. Now if we save it and let's re compile all the files and if you preview everything in a browser, you can see we have this exert field Now on the left inside exert inputs. If we start typing and there you can see this is automatically updating as well. We can remove everything. And if we heat reset, that goes back of TV out, anything he'd reset that resets clears as well as it should. OK, so that's our tax Syria component. In the next video, we're going to talk all ck Aditya integration. 39. CKEditor: in this video, we're going to have a look at the CK editor for our form component. Now what I'm going to do is duplicate the existing text area file. So if we just copy it and name it with weak and let's quickly register, it's with our components. So that's going to be called Wiz Week readyto, and that's going to be coming from the whiz Week 57 Close it now. A. One thing that we're going to change is this text area, so we are not going to have most of these things. Let's just remove all these properties. Their validation. The rapper stays exactly the same way, so we keep it that the way it is. But for text area, we're going to add ref attributes and we go into college identity and and for we also we also going to apply these a bolt property for to it so is disabled because we will in the next video and how to disable the form with the taco. But so all of these fields not only inputs but also security will have to have functionality to be able to handle disabled any enabled status. Okay, so and now I'm going to keep a death basing. But But we will also input another file. It's just quickly created. That's going to be just a JavaScript far cold toolbar which will stall all combinations off death tool bars that we my use with our system. We leave this file as the base at the moment, we're just going to important. So import toolbar from and is going to come from the same directory to about Let's just keep it like this because we not using this as a mixing so we don't have to register it this way, okay for their properties, what we going to half is going to be contents CS s. This is the CSS file. The path to see a satisfied that we want to be used within. There was weak illiterate in our CK editor instance to render the content inside of it. So all the styling that you'd like to have for the content and it's going to be of a type string and it's not going to be acquired sort required sets to false. The next property will be conflict, and it's going to be of the type object, and it's an optional property, so default will just return an empty object. Next, we have data properties, car and body stays exactly same way as within the text area. Then we're going to have editor instance, and this one by default will be sets to know in the last property will be called default, and that will represent an object with all default configuration. For our instance off CK Editor. If we open a browser, if you navigate Su CK editor that com and search for the A P I for CK at its account Vic, you'll see there's plenty of the configuration options which you can use. I will only use a few. The 1st 1 will be toolbar, and this one will come from the methods to bar. We don't have this method yet, so let's quickly created. We can remove this computed section because that's not going to be needed anymore. We're going to have toolbar, and we could make it a computer property. But because we are using it from within the data section, a computer property wouldn't quiet work here. I wouldn't return the value that we want. That's why it needs to be a method okay, some thrown from within the toolbar. We're going to return, and we're going to use our toolbar object, which we don't have yet. We only created a an empty file. And there there will be an index with the name of the Given told us of this conflict a tuber if we specified as a property. Otherwise, he used full by default. So Index, with full will return to tour by that we're after if we haven't specified it otherwise. So let's now open our toolbar file and what we going to do? He has expert default, and that's going to be an object. And it's going to be if we open our read me file, you'll see there is a full toolbar. If we copy this entire content and it's paste it in, that's that default fault will. But if you want any other tool birth, just add them to this tool Brother gs file as a different index. Okay, save it. Close it. Now our two profiles complete. So if we don't specify what toolbar we want, then for will be used by default. Okay, so after the toolbar, the next property will be called language and it will be English by default e n down. We're going to have height. Height will be by default. I'm going to specify this s 20 rpm's There were going to have contents on see assess And this welcome from this content CSS. Now you might decide that you don't want discount insee assess property Be as because Obviously you can add this constancy asses through the come pick But I tend not to use confident march whereas I tend to always use constancy assist to specify the the CSS file that I want to be rendered with din the sick editor. So that's why I have it separately. But obviously you can. You have two ways off specifying this property and I'm copying and pasting quite a few other properties which I've already used in the past. You don't have to use them. You can art any properties he want from the least using area on a secret. It's a website. Now, the next thing after this configure default configuration, we're going to go to the mountain and the first thing we're going to changes to this reset method we know going to be calling the reset method on load. We're going to call make editor method which will create now. So methods make editor and from within the edits out make it its own method. We're going to start with this editor property and we're going to set it to CK Edyta all in cups replace and we're going to replace this refs and we're looking for our identity. So this identity and this is because if we just crawled up to our template, you can see that our ref on the text area has the value off the property identity. That's why we're looking for the ref with this identity. And we're looking So this is the object to which we want to bind the instance of the of the security and then our conflict will be object. A sign ups object a sign that we're going to use an empty object. Then this default property with default configuration and the one that's going to overwrite it using this conflict property that might have been passed through to this instance off death component. As you have probably noticed, we are not important CK editor anywhere within this component. But if we open our main index, the blade you'll see that in the food that we have a script photo, which is loading the CK editor from the content delivery network. This is when we actually get in the instance of this object. Okay, so the next thing will be this set data and we're going to pass this current body to it as a property. We don't have this method, so it's quickly create it set data and it's going to take value. So from within this said data, we're going to use the instance off the editor and use methods, set data on it and then passed the value to it. So when we used to said data, that sets the value for the securities to render it within the CK editor window. Then after we called this method, we going to meet the value so I wear Rapper can update as well. So this current body and then we are going to use this at it so and bind the on change listener to it. And when the change happens, then we want to call update method. So update method will be after this said data and from within the updates, we are simply going to do this meat and this editor, and we need to obtain the data from the editor because it was he retyped something that value has changed. An editor Cicadas are has this method get data to return the value that's currently within the editor. I instance. And now let's have a look at our way. Reset and clear. Reset. We will be a meeting the value, but it's going to be current body. And then this set data as well. We need to set data on the editor to this current body. So as you can see again, we're repeating ourselves, said Data. I meet current body, own our make editor instance. So why don't we just call reset method altogether here, And that's also going to be handled exactly same way. Okay, then, for the clear methods we are doing this set data to an empty string. So our editor will have an empty string as well as we are a meeting an ab destry. Now that's pretty much everything. The only other thing is the disabled flak. So we're going to add water, and here we're going to do is disabled and we have This is disabled flock available because obviously we are extending based in port and base input is using disable ER, which has seized, is able to property. So when this is the Zabel changes, Will wants to toggle the read on Lee State on ours. Instance off the CK editor. So this editor and editor has a method called set reit Onley, which takes a boolean true or false. And now when the value of is disabled, changes them, we will receive is read only flak the bullion value in other words, which we can then pass to this said read Onley method. If we now open our index the blade you'll see that I've already out it It was we carried out our form a standard properties Then we have this constancy assess which comes from the the Editors see assess file which comes with these exercise files. Then we have a conflict with confidently specified height at 30 Ari EMS 20 aerials, which is default usually works fine, but I just wanted to show that we can obviously overwrite it. Then we have this body slots which returns body H one tuck. We need to parse it for the HTML entities because you cannot just put H one talk. That's not going to work. You have to make sure that you convert this talks to a female entities because we use blades templates with La Nouvelle. You can obviously use those double Kelly brackets to Paris, everything to HTML entities. And if we know every compile of the assets and preview everything a browser, you'll see we now have seek a return on the left. Inside, we have index body with our HTML, we start typing body and something else he can see. This is updating if we remove everything. If we try and reset. That also resets everything. Clearing embodies the body as well. Okay, if we go back to the editor and let's just remove this height 30 you'll see that this will change the height off this import. Desiccated wind, obviously to 20 rpm's in annex allows video of this course. We will have look a toggle button, which will allow us to enable all disable all fields off our form 40. Toggle disable: in this last video of this course will have a look at the Togo button which will allow us to disable or enable all of the fields and buttons associate it with the given form. The first thing we need to do is to make sure that every component with then our main Robert component has this disabled property associated with it and it is associated with is disabled property coming from the form? Robert, once we've done all this for every single field, we can close our index blood dull blade filed. Then if we open our rapido view file, we will pass to new methods. Sallis lots There will be called Enable event and the other one will be disable event. I'm just going to quickly do it this way. So let's create this new to new methods was crawled down. Let's create this enable event and what it will do is it will just fire the events or event bus fire, disable, and it's and we're going to concatenation with this group and the other one disabled event . We just copy it Disease Able event. It will be disable started and the reason why we need both of these methods is because our extendible batons batons that are not within the form rapper wouldn't be able to be disabled because they obviously are only responding to the disable ended and disable started events, but they wouldn't receive is disabled property off this form rapper. That's why we have to have a way off actually dispatching event, which can obviously distribute the message to all elements associated with the from whether or not they are with then the actual form. Robert. Okay, so now we can save and close our form. Robin, Let's now open our main. Actually, no, let's go to templates, partials, and we go into the attached buttons. And in a section when we have this battle groups, what I'm going to do actually duplicate this reset button and let's start, we're going to give it a class secondary has gone to his grey button rather than props reset. We're going to use disease Able event methods, which would just create it, and we want to show it only we're not going to have a disabled. We're going to show it. Evie, if exclamation Mike Props is disabled, so only when it's not disabled, shelved his baton and for the I confront. Also, we're going to use F A power off, and I see the label will be disabled. And then the other one, which will show when the button the actually form is disabled So it will show when it is disabled. De Button will have a color green. So success and then we will change the label to enable and what we also need to changes rather than these able even this time want to enable it. So in a born event. Okay, let's re compile the assets quickly and PM Ron Death Never refresh the page. You can see we have this disabled bottom if you click it. There we go. It the Zabel's all of the form fields as well as the bottoms, as you can see, and that works for the external buttons as well for re enable it. It makes all of them enabled again. OK, so that's all fine for the internal buttons. But what about the detached once? If we go back to the editor and if we know closed this file, we can open there form buttons. The touched one thing that I've notice is that We've passed the flag disabled as disabled rather than is disabled for consistency because all other flags are is disabled, are named, is able to Let's just change it. So we go to triggers trigger and you can see the our render method now passes. Desist is disabled rather than is visible. So let's just change it to is disabled now we're gonna have to change it all in this file, so I'm just going to So, like all of the instances and let's change it to props is disabled. And I'm also going to do the same thing with multi check boats over Go multi checkbooks Index. We have the same thing here. It's props disabled, so select all and change it to is disabled for all those trees can weaken saving. Close this file. Now let's add these two new buttons to our detached Barton's section. And if I just duplicate this for his button here and let's put these items on new lines, group stays V clock states fire. We're going to be firing disable started event and rather than Allah Barton, we're going to have second drew one so this gray button will show up and trigger. We're going to call the Striga methadone click, and we only going to show it V if. And we have exclamation mark Props is disabled. So showed this button on Lee when disabled two sets to false and then we don't need to disrupting spawned this conditional statements. Here we only going to have one label does going to be f a power off for the I come and the button will say he's able. And now if I just copy this entire thing and let's do one for enable it will fire event called Disable ended and it will have successful button green one success office. You might have different stars, depending on what sort off CSS you're using and then it will only show when it is disabled . Same icon. But the labour will be enabled. Okay, Now, if you re compile the changes that we've done to our tree gap, every refresh the Patriot can see that we have this disable Barton within our the touched buttons which, outside of the form robber, if we click on disable that disables all of the fields in the Barton's associate with the form. But if we click, enable Nothing happens if you go back to our Eddie Tam, and I'm going to show exactly why this is happening. If we open our trigger, don't view file, you'll see that we are passing the method trigger as they're called to the method Conditional trigger and this conditional trigger methods checks whether that is disabled, Flaccus said. Too true. And if it is, then it does nothing. And this is obviously the case with our enable button, because the trigger is already disabled. That's what when we click, nothing happens. So what we need to do is to out another flock to our properties called always enabled. This way we will be able to specify, and it that regardless of whether there is able to set to true false, you always call the trigger methods so always enabled type by default bullion and it will be by default, false, and what we going to do here is check if this always enabled is set to fall so exclamation mark. This always enabled. If it isn't then return, otherwise just called this trigger method. Let's not go back to our buttons, and the last thing we need to do here for our enable button after V Cloak. Let's aren't this always enabled? Set it to true. Okay, if we now save it, let's re compile all the assets. If we refresh the page now disable for click it that disables older inputs in Barton's. If we click on enable That re enables them if which change it from within the embedded Barton's, and we can also switch it from within the ones outside of the form. Robert. Now let's go back to the editor one small and what we're going to do. It's just disable deformed by default. I'm just going to close all of these files. If we go to our where the main index tilt blade and it's growing up to the top and if we aren't disabled, flock to it. So these abled said to True, you'll see that everything was safe and refresh. The page now is disabled by default and weaken straightaway. See there enable buttons. Every click it dot enables it disables again. And so, as you can see, you can work whichever way you want. You can disable directly from within the view by just setting it automatically on page loads on the form rapper or just by using the buttons or any other means that you could use with the form. Some, perhaps some other component with disables that the form and so just make sure they always use the same group. And obviously, the event naming is consistent. So this was the last video, and it's serious. I hope you enjoyed its. If you have any questions or suggestions, please use the designated common section.