Friday, October 23, 2020

FormArray in Angular With Example

FormArray in Angular provides another way to group any number of controls apart from FormGroup in Angular. Difference between FormGroup and FormArray is that in FormGroup each child FormControl is added as the part of FormGroup object as a key, value pair where control name is the key. In FormArray value of each child FormControl is added into an array.

Since FormArray internally maintains an array of FormControls so it is easy to add or remove controls from it giving you capability to create a dynamic form using FormArray in Angular.

Wednesday, October 21, 2020

FormBuilder in Angular Example

In this tutorial we’ll see how to use FormBuilder in Angular to create a form. FormBuilder is a helper class that reduces the boilerplate code while building a form. It shortens the code to create instances of a FormControl, FormGroup, or FormArray.

Steps needed to use FormBuilder

  1. Import the FormBuilder class.
    import { FormBuilder } from '@angular/forms';
    
  2. Inject the FormBuilder service.
    constructor(private fb: FormBuilder) { }
    
  3. Generate the form contents. The FormBuilder has three factory methods methods: control(), group(), and array() used to generate instances of form controls, form groups, and form arrays in your component classes.

Thursday, October 15, 2020

Angular Form setValue() and patchValue()

In this tutorial we’ll see how to set values for the form controls using setValue and patchValue in Angular forms. We’ll also see the difference between setValue and patchValue methods.


setValue in Angular

setValue as the name suggests is a method used to set values. You can use it to set value of a single form control instance, form group or form array.

Tuesday, October 13, 2020

Checkbox in Angular Form Example

In this post we’ll see how to use check boxes in Angular form. We’ll see examples of adding check boxes to both template-driven and reactive form in Angular.

Checkbox in Reactive form Angular example

In this Angular Reactive form example we’ll have a form with two input fields for name and date (with a date picker for picking date) and a group of check boxes to select favorite exercises.

Monday, October 12, 2020

Radio Button in Angular Form Example

In this post we’ll see how to use radio buttons in Angular form. We’ll see examples of adding radio button to both template-driven and reactive form in Angular.


Radio button in template driven form example

In this Angular template driven form example we’ll have a form with two input fields for name and email, a date picker for picking date and a group of radio buttons to select membership type.

Thursday, October 8, 2020

FormGroup in Angular With Examples

Using FormGroup in Angular forms you can group FormControl instances and track the value and validity state of those instances as a group rather than for each individual FormControl instance. In this post we'll see example of using FormGroup with Angular template-driven form as well as with Reactive form.


Tuesday, October 6, 2020

Angular Reactive Form Validation Example

In the post Angular Reactive Form Example we saw an example of creating a simple Reactive form in Angular in this post we’ll add to that example to create an Angular reactive form with validation.

Tracking control states

NgModel directive used with the form controls tracks the state of that control. Three things you'll look for while validating form fields are-

  1. Whether user touched the control or not,
  2. If the value of the form control is changed
  3. If the entered value is valid or invalid.

Monday, October 5, 2020

Angular Template-Driven Form Validation Example

In the post Angular Template-Driven Form Example we saw an example of creating a simple template-driven form in Angular but that example lacked one important aspect of forms; validations. In this post we’ll see an example of Angular template-driven form with validations.

Tracking control states

NgModel directive used with the form controls tracks the state of that control. Three things you'll look for while validating form fields are-

  1. Whether user touched the control or not.
  2. If the value of the form control is changed.
  3. If the entered value is valid or invalid.