Join Alexander Zanfir for an in-depth discussion in this video Add answers to a question in Angular, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll add several new inputs into our question form. One for the correct answer, and then three more inputs for incorrect answers. Let's go over to our front end project, and let's open up our questions component HTML file. Let's copy our first input between line four and line six. And we'll need this md-form-field for every input element, although this has changed several times with Angular Materials, so I suggest giving a quick glance at the Angular Materials website under Components and then Form Controls and then selecting Input.
If we look in the view source of the first example, we can see the required syntax and elements in order to get the input to work correctly. Please double check that this matches what is shown in the video, since it might have changed. So after copying everything between line four through six, paste it right below. And the first thing we'll change on line eight is the property. So instead of .text, we'll set that the .correctAnswer.
The name will also be correctAnswer. And then, let's update the placeholder as well. Let's save that and take a look. We can see we have our second input, but what I'd like is to have each input take the entire width of the card. In order to do that, we'll create a new CSS property. So let's open up our styles.css and add that below line two, we'll add .fullwidth, with a property width and set that to 100 percent.
Let's save that out and then back in our inputs, in our question component, we'll add the class to the form field element. Let's try one for now and see what it looks like. We can see it's working, so we can add it to the rest. Now we can carry on and add the three remaining inputs. And as you can see, I'm using auto formatting by press shift+alt+F in Visual Studio Code.
Now, let's go ahead and modify the property for each of these inputs. The first will be answer1, then answer2, and so on. And the same with name. And then, let's update our placeholder to wrong answer.
Let's save that and give it a try. Back in our app, let's add some placeholder data and then hit post. Inside our network tab if we scroll down under payload, we can see we're getting all of our properties, and our question object, and their values. So now, we have the front end component working, let's take a look at how to save our question with its answers on the backend.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework