Angular Core

Angular Core Creating Form Fields


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Creating Form Fields" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas codes in a few more fields for the projects.

Get Unlimited Access Now

Transcript from the "Creating Form Fields" Lesson

>> Speaker 1: Now, the beauty of this is that when we cancel this, and we want to go and fill this out. Well, the thing is, this doesn't have an ID yet, because it's an empty object. And so now you can say, does this have an ID, yes or no?

[00:00:19] If it has an ID, update it, if not, create it. So essentially it's a kind of an upsert as it checks does this exist, if not, create it, if it does, then update it. We'll notice here as well in the component, we'll go up here, that we're checking does the product exist?

[00:00:37] Well, it's always going to exist, because now we're initializing it to this empty object. So we go here.
>> Speaker 1: Select the project.
>> Speaker 1: Then we hit Cancel, then it goes back to nothing. So into our code now. Let's go ahead and let's build out for the rest of the properties here.

[00:01:09] So Title, we had, let's check here.
>> Speaker 1: Details, percentComplete, and approved.
>> Speaker 1: And we'll make this actually a texttarea.
>> Speaker 1: Details and because this is a textarea.
>> Speaker 1: Then you need to close that. And then what we'll do here is,
>> Speaker 1: For the percent complete,
>> Speaker 1: Let's do linear, just kind of a new component, cuz it's fun.

[00:02:08] So we'll go h4.
>> Speaker 1: SelectedProject.
>> Speaker 1: PercentComplete.
>> Speaker 1: I don't know why that came out as a class.
>> Speaker 1: Complete, and then from here let's introduce a slider.
>> Speaker 1: I'll go mat.
>> Speaker 1: And then within the slider, we're gonna go into the class, also set this to full-width.

>> Speaker 1: And then let's set some additional properties. So min is going to be 0. Max is going to be 100. And let's add in the thumbLabel. So some of these things, it's just a matter of actually looking it up in the documentation.
>> Speaker 1: ThumbLabel. And then we're going to also hook in.

>> Speaker 1: Es code is being just crazy right now, no tick interval.
>> Speaker 1: NgModel. So this is two-way data binding that, if parentheses are events, and brackets are properties, that essentially you're connecting the two together. So making a two-way street.
>> Speaker 1: SelectedProject and percentComplete.
>> Speaker 1: And we have one more here.

>> Speaker 1: And the one thing I had to do as well.
>> Speaker 1: Is mat-form-field is very particular about what can actually go in it. And so mat-form-field, I took that off and I made this just a section. And let's do one more, also a section. And mat-checkbox ngModel selectedProject.approved name approve.

>> Speaker 1: All right.
>> Speaker 1: Approved By Customer.
>> Speaker 2: So an extra angle on line 52.
>> Speaker 1: Line 52.
>> Speaker 2: Mat-slider
>> Speaker 1: Good eye.
>> Speaker 1: And then I believe, this on the other hand, needs to have a closing mat-checkbox.
>> Speaker 1: All right.
>> Speaker 1: So Title, Details,
>> Speaker 1: And I wonder, let me just double-check.

>> Speaker 1: There we go. So here.
>> Speaker 1: And for some reason, the slider is not binding correctly. Right, name=percentComplete.
>> Speaker 1: There we go.