Adding sub-form groups in Angular 6 using the .addControl method

I'm working with a form that is split across components, so I need to utilize the .addControl method to ensure the form functions cohesively.

This is how the form structure currently looks:

name: ['', [Validators.required, Validators.maxLength(255)]],
address: this.ofb.group({
    addressLineOne: ['', Validators.required],
    addressLineTwo: ['', Validators.required],
    addressLineThree: [''],
    addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
})

I've made adjustments to convert the fields to the .addControl syntax as follows:

this.createOrganisationForm.addControl('name', new FormControl(null, [Validators.required, Validators.maxLength(255)]));
this.createOrganisationForm.addControl('addressLineOne', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineTwo', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineThree', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressPostcode', new FormControl(null, [Validators.required, OrgValidators.postcodeValidator]));

However, I'm facing an issue where they lose the 'address' grouping. I attempted to include the address details in an object like this:

 let addressGroup = {
  addressLineOne: ['', Validators.required],
  addressLineTwo: ['', Validators.required],
  addressLineThree: [''],
  addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
 }

and then added it using the following code:

this.createOrganisationForm.addControl('address', addressGroup);

but unfortunately, I encountered the error:

is not assignable to parameter of type 'AbstractControl'.

Could someone please guide me on how to properly add a group of controls to a parent control using the .addControl method?

Thank you

Answer №1

To start your addressGroup, make sure to set it up with the correct type of FormGroup as demonstrated in this code snippet:

let addressGroup = {

let addressGroup: FormGroup = new FormGroup({

Answer №2

The reason why the addressGroup object is not considered an instance of the FormGroup class is because it has not been constructed using the new keyword and the FormGroup constructor.

const addressGroup =  new FormGroup({
  addressLineOne: ['', Validators.required],
  ....
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the mdTooltip when clicked and keep it hidden until clicked again

I would like to disable the mouse-hover effect and activate mdTooltip on click, then deactivate it by clicking again. Is there a way to achieve this? I initially tried using the .toggle() method but realized that it was working in the opposite manner than ...

Is there a built-in method in Next.js 13 to secure routes from unauthorized access?

In my project, I have the following pages: /about, /user, and /user/[id]. Unfortunately, I am unable to access req.page, which provides the slug (i.e. /user/[id]), making it difficult for me to implement logic to redirect requests from unauthenticated user ...

Using TypeScript with React Router to access the isActive property on NavLink

Currently, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55273034362178273a2021302778313a3815637b6167">[email protected]</a> and have implemented the following react component: import { Link as Nav ...

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

Issue with jQuery not working in window resize if else statement

Is there a way to execute a script based on window resize without having to reload the page each time? I've tried using if statements, but they don't seem to work properly when the browser is resized. The current code only functions correctly whe ...

Error encountered when utilizing AngularFireAuthGuard: NullInjectorError

Encountering a NullInjectorError while trying to use the AngularFireAuthGuard from the angularfire documentation. Despite adding AngularFireAuthGuard and AngularFireAuthGuardModule to my app.module.ts, it keeps throwing an error stating there is no provid ...

The issue with binding arises when attempting to bind in nested elements within an ng-repeat loop

Here is the code snippet I am working with: <div class="list-group"> <a href="#" class="list-group-item" ng-repeat="user in users"> <h4 class="list-group-item-heading">{{user.FirstName}} {{user.LastName}}</h4> <p class=" ...

Is it possible for me to create separate class/interface based on property values?

My question pertains to a class named Selection (which could alternatively be an interface). The Selection class may feature a coverage property with a value of 'all' or 'selected'. If the coverage property is set to 'selected&ap ...

What is the method for incorporating an extra event handler in jQuery or regular JavaScript?

In my object, I have a custom onShow() function that is called when the object is displayed. I am able to override this function by reassigning it. o.onShow = function() { // do something }; However, overriding the function removes the previous version. ...

Accessing a JavaScript URL beyond the Facebook frame application

I have developed a Facebook application with a navigation menu, and I am seeking a way to open links outside of the iframe app. Is it possible to achieve this? Currently, I am using the code below which loads inside the iframe but I am unable to get it t ...

Is it possible to remove a form element without relying on jQuery's .remove() method?

Looking to hide the select all checkbox from users without actually removing it when submitted. The challenge lies in making the removal of the select all checkbox seamless on the front end, while ensuring it is not sent to the server. Is there a way to ...

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

My website is quite extensive and contains numerous elements. There are times when I find myself wanting to navigate back and forth between different sections of the page. I've noticed that some websites have a feature called a "page trail," which di ...

What is the process of directing to another HTML page within the same Express controller script?

I am looking to switch the initial page (login page) to a second page (admin dashboard) from within the same controller in Express after a specific action has been taken. Here is the relevant code snippet from my controller file nimda.js: function handle ...

What is causing my Next.js server action to be mistaken for a client-side function?

I'm currently working on implementing infinite scrolling for the NextJS gallery template project by following this specific tutorial. The server action script I am using is as follows: // /actions/getImages.ts 'use server' import { promise ...

What is the process for redirecting to a Courier site using the consignment number of the item?

Currently, I am working on an e-commerce project that involves redirecting customers to a specific courier site where they can track their shipments using the consignment number. My goal is to make this process seamless for the user so they don't have ...

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Programming Languages: // JavaScript code snippet //https://www.npmjs.com/package/utf8 //https://github.com/mathiasbynens/quoted-printable par_comment_qoted = quotedPrintable.encode(utf8.encode('test ąčęė')); console.log('par_comment_qot ...

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. https://i.sstatic.net/yZBK7.png to https://i.sstatic.net/LxTtT.png <Dropdown placeholder=&apo ...

Displaying the count of items outside the Angular 2 ngFor loop

As a beginner in Angular, I've encountered a small issue. How can I display the actual number of items outside of an *ngFor loop? Currently, I'm using filter and pagination pipes in this manner: *ngFor="let item of items | filterBy: ['name ...

Using Javascript to enable drag and drop functionality

After attempting to use a guide for creating drag and drop features, I encountered an issue. I followed the steps outlined at Despite the detailed instructions in the guide, I cannot seem to get the functionality to work. Is there a mistake in my code? I ...

What is the best way to align the left div with the right div?

Here's the challenge: I want to make the left div stretch to the height of the right div https://i.sstatic.net/R3MCY.png and here's the desired outcome https://i.sstatic.net/UAXWC.png Currently, I'm implementing this using bootstrap < ...