D4mations.com

Bootstrap radio buttons in Angular

[ad_1]
https://i.ytimg.com/vi/IjEWmoOHHvM/hqdefault.jpg



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
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

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
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html

Slides
http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular_28.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

Original source

d4mer

,
, , , , , , , ,

16 responses to “Bootstrap radio buttons in Angular”

  3. This is third series that I have been following of yours. Its been great journey of learning bus for me and I appreciate all the details and problem description that you have been laying out along with right approaches that people should take which really turns out key to understand why we follow best practice and not just blindly follow tutorials and examples as granted. I'm still early on this current series to comment about it, but so far so good. One minor thing I would like to point out is while encoding your videos consider normalizing volume of the video for consistent tutorial experience, for example: this video is low on volume while prior video had high volume for the audio level that user is listening on. Cheers!

  6. Nice Explanation…
    Doubt:- regarding radio buttons
    Que:- I have 3 employee details like you explained in list of employees bootstrapping prgm …. you are displaying name of the employee on top and remaining details on 2 columns
    Here my actual doubt is consider there should be a radio button for name after clicking/ check radio button how can I display details of employee ( like show/ hide)

    Please explain this concept

  8. Happy New Year to your channel and all your followers.Last year I made several applications with ASP MVC and Angular.Thanks a lot for your help. Wish you all the best… πŸ˜πŸ‘¨β€πŸ’»πŸ‘©β€πŸŽ“

Leave a Reply