It's pretty exciting. I can see the finish line for the application and therefore also for the first stage of this course. And so we are on the last feature which is to finish off the ability to create proposals. Right now we have the ability to generate a proposal in the sense that we can type it in and have all of the information shown here on the screen and that's fine. But we want something more. We want the ability to have the other side of an API connection which means that we want to have our form actually be able to feed and create records in our Rails app. So that's what we're going to get started here. And the best place to get started I think is going to be the fact that we have no submit button. So in this guide that's what we're going to do is we're going to add a submit button. So I'm going to open up proposal-new.component.html and coming down below. We have our client email so I think would be a standard spot to put this right below that but make sure you put it above the form in order for this to work. I'm goint to create a button here. And this is going to be of type submit. And inside of it I'm going to say Generate Proposal now if I hit save

<button type="submit">
  Generate Proposal
</button>

this is going to give us a very ugly looking button. So one of the first things we'll do is let's style this button. So first thing is going to be adding some classes. And for the class I'm going to go with btn btn-outline-primary btn-lg those are some classes that are brought to us directly from Bootstrap 4 and this (style) is not exactly what I was going for. So let's see what is causing that. So and I know why it's because I forgot to actually declare a button. And so we have a button and then we have a class I'm antsy to get this part finished so I guess I am going a little bit too fast on it. There we go. So now we have our button and that looks a lot better. This is exactly what I was going for. So we have our button and you can play around with any of the other colors so say if you wanted to do primary you could change it to that. And now we will have a button that matches this (our proposal dropdown button) button which may actually be a better idea instead of having kind of two off-white color or off blue colors. It could have both of these match. So that's probably smarter to have that one.

class='btn btn-outline-primary btn-lg'

So now that we have our style this still is going to do anything. So we need to add some functionality to it. And one thing that I want to do that I think would be really cool is to make it so the button can't even be submitted unless, so it's is going to be disabled unless the form is valid. That's something that you have probably seen in a bunch applications that you've worked on or even if you haven't worked on them just applications that you went to. So you can be on Hotels.com website or something like that. That's a pretty common thing is to actually disable the button until all of the required form fields are done. So the way that you can do this in angular 2 is it's still inside of this button. And I'm going to create an outlet here called disabled

<button type="submit"
  class="btn btn-outline-primary btn-lg'
  [disabled]
>
  Generate Proposal
</button>

and what disabled is going to do is it is going to check and see if the form is valid and if it is not valid then it's going to make it disabled. And so we need to find what our form name is. And so we have our proposal form that's what it's called. So that's what we need to grab. So we're going to have

[disabled]="!proposalForm.form.valid"

And so now if I click save and what this is going to do is it's going to make it so unless the proposal is valid it shouldn't actually work. Ok, perfect. This is disabled and the way you know it is. Notice how the little cursor here is showing that you can't click and if I try to press down on this nothing happens.

Now if I go and I fill all form so I come and put in all of this information then you can see right here this one is optional (Client Email) so you don't need it but you can see that now the form is perfectly valid. So this is good. This means that all of this is working. And if you're wondering exactly how this is possible it's all in the angular form library. And so what it gives us is the ability right here to select the form and then from there we grab the specific form that it's referring to. And then we have the ability to know if the form is valid or not at the stage all in real time and what it's doing is it's actually going and it's looking at each one of the form elements and it's looking at this required statement.

id="weeks_to_complete"
required
name="weeks_to_complete"

So if you don't have any required statements then the forms are going to be valid even if no information is entered in at all. So that is a way that a form works inside of angular. So this so far so good. I really like this. I want to add one more feature that I think would be really cool and that is whenever a form is submitted I want the button to actually disappear. And to be replaced with something you know some type of you congratulations. Your proposal has been sent something like that. And the way we can do this is we can add another value here. So inside of the button I can say hidden which is another outlet just like [disabled] is an outlet. Hidden is an outlet. So what we're doing is we're saying that we want the ability to set this value and we're going to say for "submitted" now submitted is a value we have not created yet.

<button type="submit"
  class="btn btn-outline-primary btn-lg'
  [disabled]="!proposalForm.form.valid"
  [hidden]="submitted"
>
  Generate Proposal
</button>

So we're going to have to do that now. So this will probably break this (no, it won't). So that's fine. And it's because probably because we haven't actually. It's just returning a undefined or null so it's not going to break it. But obviously it wouldn't work. proposal-new.component.ts And now what we're going to do is actually just create a new variable called submitted and submitted is going to be of type boolean and by default we're going to set this to false. So we want it to start off as being false.

And if I hit save now nothing on the page should change. And just like that it doesn't. But now watch what happens if it change this to true. So if I hit true now our button should disappear. And there you go. The buttons not there. So that's a way of being able to hide or show elements on the page. And if you're wondering what I'm doing with this it's mainly just because I'm making room for a future feature we're going to build in here in the next few guides and that is I want the ability to once after we've filled all this out and we click on generate proposal I want this to disappear and I want a cool little alert message to pop up. And for it to say congratulations your proposal has been submitted. And then we will be good to go. So that is what we're going to start doing in the next guide which is we're going to actually start wiring this up to the API.

Resources

• Code at this stage