Angular formbuilder example
In this video we will discuss an easier way of creating reactive forms using the FormBuilder class
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...
In Angular, there are 2 ways to create reactive forms
1. Explicitly creating instances of FormGroup and FormControl classes using the new keyword. We discussed this in Part 4 and Part 6 of Angular 6 tutorial.
2. Using the FormBuilder class
The FormBuilder class provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of code we have to write to build complex reactive forms. The FormBuilder service has three methods:
control() - Construct a new FormControl instance
group() - Construct a new FormGroup instance
array() - Construct a new FormArray instance
We will discuss FormArrays in our upcoming videos.
Step 1 : Import FormBuilder
The FormBuilder class is provided as a service, so first let's import the service
import { FormBuilder } from '@angular/forms';
Step 2 : Inject the FormBuilder service
Once the FormBuilder service is imported, inject it into the component using the constructor
constructor(private fb: FormBuilder) { }
Step 3 : Use the FormBuilder
1. Notice in the example below, we are using the FormBuilder group() method to create a FormGroup instance.
2. To the method we pass an object that contains a collection of child controls.
3. For each child control we specify a key and value.
4. Key is the name of the form control and the value is an array.
5. The first element of the array is used to specify an initial value for the form control.
6. The second and third elements of the array are used to specify synchronous and asynchronous validators for the form control. We will discuss these when we discuss form validation in our upcoming videos.
7. For now, we have defined just the initial value using the first element of the array.
8. We have specified an empty string as the default value for all the controls except proficiency radio buttons.
9. For proficiency we have a default value of beginner. So the respective radio button is selected when the form loads.
this.employeeForm = this.fb.group({
fullName: [''],
email: [''],
skills: this.fb.group({
skillName: [''],
experienceInYears: [''],
proficiency: ['beginner']
}),
});
FormBuilder reduces the amount of boilerplate code we have to write to build complex reactive forms.
Auf dieser Seite können Sie das Online-Video Angular formbuilder example mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer kudvenkat 01 Oktober 2018 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 89,300 Mal angesehen und es wurde von 549 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
