Angular nested form groups
In this video we will discuss nested form groups in a reactive form. Along the way, we will also discuss working with radio buttons in a reactive form.
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Text version of the video
http://csharp-video-tutorials.blogspo...
Slides
http://csharp-video-tutorials.blogspo...
Angular 6 Tutorial
• Angular 6 tutorial for beginners
Angular 6 Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
Angular, JavaScript, jQuery, Dot Net & SQL Playlists
https://www.youtube.com/user/kudvenka...
The requirement is to dynamically create a group of form fields and also validate them as a single group so "Add a new skill" button can be enabled or disabled based on the validation state of the group. This can be very easily achieved using a nested form group. So, first let's create a nested form group for skill related fields in the component class.
Step 1: Creating a nested form group in the component class : Form groups can accept both form control and form group instances as children. This allows us to create a nested form group.
ngOnInit() {
this.employeeForm = new FormGroup({
fullName: new FormControl(),
email: new FormControl(),
// Create skills form group
skills: new FormGroup({
skillName: new FormControl(),
experienceInYears: new FormControl(),
proficiency: new FormControl()
})
});
}
Notice we have created a nested form group with key - skills. This nested form group contains 3 form controls.
skillName,
experienceInYears and
proficiency
Step 2: Grouping the nested form in the template : To group the form elements in the HTML, encapsulate the form elements in a div element and use the formGroupName directive on that container div element. Bind the formGroupName directive to the skills FormGroup instance in the component class. Bind each input element in the HTML, to the corresponding FormControl instance using the formControlName directive.
Please note : If you do not see the nested formgroup value displayed, make sure you have the following in the template after the closing form element.
Form Values : {{employeeForm.value}}
In our upcoming sessions we will discuss, form validation and dynamically adding form controls.
In questa pagina del sito puoi guardare il video online Angular nested form groups della durata di ore minuti seconda in buona qualità , che l'utente ha caricato kudvenkat 25 settembre 2018, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 96,339 volte e gli è piaciuto 488 spettatori. Buona visione!
