We can use formbuilder rather than declaring each component and form group new ourselves.

This relies on us adding the import “FormBuilder from @angular/forms

We then use this by utilizing the constructor:

import { Component, OnInit } from '@angular/core'
import { FormGroup, FormControl, FormBuilder } from '@angular/forms'

export class OurComponent implements OnInit {
   customerForm: FormGroup;
   customer: Customer = new Customer();

   constructor(private fb: FormBuilder) { }

   ngOnInit(): void {
      this.customerForm = this.fb.group({
         firstName: 'default'
      });
   }
}

or instead of “firstName: ‘default'” you could use “firstName: {value: ‘default’, disabled: false}” this allows you to pass an initial state to the item. Maybe more importantly we can use an array syntax instead which allows us to pass in validators i.e. firstName: [‘default’, [Validators.required]]. In this final example we are using one of the angular built in validators but we can also define and use our own. As you can see this can be an array of multiple comma separated validators.

There are two types of form you can use with Angular “Template driven” and “Reactive” (also known as “Model driven”).

Template driven forms rely on the html to deal with the majority of the form building. See below for a Template driven form. This binds a property from our component class to the value of the input element. You must have a name element in order for this to work effectively. #firstNameVar is the template reference variable to access the form control instance this allows for some error validation. Angular does a lot of our work for us in the template driven approach however it is less flexible. NgModel gives us the two way binding.

 
 
First Name  Please enter first name.
Save
 

 

The second type of form in Angular is the Reactive form. In this approach we create the form module (which angular deals with under the hood in the Template based approach.

Component:

import { Component, OnInit } from '@angular/core'
import { FormGroup, FormControl } from '@angular/forms'

export class OurComponent implements OnInit {
   customerForm: FormGroup;
   customer: Customer = new Customer();

   ngOnInit(): void {
      this.customerForm = new FormGroup({
         firstName: new FormControl('default')
      });
   }
}

Remember to add ReactiveFormsModule to the declarations of the Module!

Creating the Reactive Form:

We can now use the formgroups get method i.e. customerForm.get(‘firstName’).valid in the html.

You may need to trust a URL first, otherwise the DomSanitizer will remove it (see the docs).

url = sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + image)

Then you can use that url and bind it:

.