Bind form inputs to your component model and class variables.
- To get the data or values from our two imp boxes, we could use something called a FormBuilder with reactive forms. Which is a good choice in this case, but I'm going to keep it simple with individual data-binding. This is so that you can learn multiple ways of achieving something similar. We will take a look at reactive forms and FormBuilder in a later chapter. Back in our new message component, let's begin by creating an owner field and our new message class. So we'll do that below the constructor, and we'll set it to a value of test.
Next inside our input element on line 10, let's add a value property, and we'll set it to our new owner class property, and we'll wrap that in double curly braces. Let's save that out and then take a look at our page. After the automatic refresh, we should see our test value inside the name input, but this is not yet two-way data-binding. Meaning that if I type something else in the name input instead of test, our name field will change its value as well, and that is not yet happening.
We will see two-way data-binding in a later chapter. Next let's bind the click event of the post button to a custom function we'll create in our class. So let's go back to Visual Studio Code. Inside the class let's add a post function. Then let's go to our template HTML inside our button tag and let's add a click directive to bind it to our post function.
Now inside our post function let's console.log(this.owner); Let's save that and give it a try. Now if we hit POST we can see we're getting the value test as expected. But if we change our name in the input it does not carry through to the owner field. As you can see we're still getting test, and that demonstrates that it's currently not two-way binding yet.
So let's switch that over so that we are getting two-way binding. Back inside Visual Studio Code, instead of setting the value as we are on line 10, we will use the ngModel directive and set it to owner. So let's remove value and I'll use Angular's double-binding syntax with a square bracket followed by a parenthesis. Inside I'll place the directive ngModel and we'll set that to owner.
If we try this out after saving it, we should get an error that tells us ngModel is not a known property of mdInput. To fix that we need to add angular forms to our main module. So let's go back to Visual Studio Code, and let's open up our app.module. So first let's import FormsModule, and that will be from angular/forms, and then let's add it to the import's list.
Let's save that and give our app another try. As we can see we are no longer getting the error, and let's test out the double-binding. So if I hit post we should see test, if I modify the value and hit post again we'll see the updated value. We can now continue and create the message object that will contain both the text and the owner. So let's go back to Visual Studio Code. Inside our new message component let's create a new object.
And I'll call it message. And it will contain our owner. And we'll change the equal sign to a colon. And we'll add the text property as well. And we'll initialize it to an empty string, and we'll do the same for owner. Now let's data bind this new object to both our input on line 10 and our text area on line 13.
So instead of owner we'll use message.owner and we'll copy this into the text area, and we'll set it to message.text. Finally let's update our console log, so that it outputs this.message. And let's give that a try. I'll set a name and a message. And let's post that. As you can see we're getting the expected object with the correct values.
We are not ready to send this data over to our backend. So let's focus on that next.
- Setting up the app infrastructure
- Creating and configuring the Angular 2 project
- Displaying data in Angular
- Refining the layout
- Creating the ASP.NET Core project
- Creating a controller with ASP.NET Core
- Creating a nav bar
- Registering users
- Authorizing resources
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: setting up the app infrastructure, displaying data in Angular 2, getting data from ASP.NET Core, creating a controller with ASP.NET Core, and authorizing resources.