Text version of the video
Slides
Angular CRUD Tutorial
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In this video we will discuss working with radio buttons in Angular Template Driven forms.
We want to include “Gender” radio buttons in the Create Employee form. When we select employee “Gender” using the radio buttons, the selected gender value should reflect in the Angular generated form model. Also, we we click the “Save” button we want the selected gender value to be logged to the console.
Please copy the HTML for radio buttons from our blog using the link below
Code Explanation
1. The name attribute is required to group the radio buttons as one unit and make the selection mutually exclusive. Make sure both the radio buttons have the same value for the “name” attribute. Otherwise the radio button selection won’t be mutually exclusive.
2. It is also important that you set the “value” attribute for each radio button. This value is posted to the server when the form is submitted.
While we are here, let’s also include a textbox to capture “Phone Number” and “Contact Preference” radio button.
Please copy the HTML from our blog using the link below
