having trouble assigning a value to FormGroup within a nested object

I attempted to assign a value to a subgroup but encountered an error. Here is the snippet of my code:

let dataArr = new FormArray([]);
dataArr.push(new FormGroup({
'name': new FormControl(this.users[0].data[0].name),
'category': new FormControl(this.users[0].data[0].category)
}));
let formArr = <FormArray>this.myForm.controls.users;
formArr.push(this.fb.group({
name: this.users[0].name,
displayOrder: this.users[0].displayOrder,
sort: new FormGroup({ 
type:new FormControl(),
format: new FormControl()
}),
data: dataArr
}));

I tried to assign a value to the sort object which has type and format properties, but faced difficulties. Here is my JSON object:

[{"name":"manu","displayOrder":1,"sort":{
"type":"first","format":"normal"
},"data":[{"category":"electrical","name":"ele"}]},{"name":"divya","displayOrder":1,"data":[{"category":"tech","name":"ea_tcv"}]}]

Below is a screenshot of the form:

https://i.sstatic.net/7M8DU.png

How can I set the value for the sort object?

Here's my code.

Answer №1

It's not completely clear if I grasp your question correctly, but in case you want to assign values to the Sort object, you can achieve this by passing the relevant fields from the data object to the FormControl constructor:

updateForm() {
    let formDataArr = new FormArray([]);
    formDataArr.push(new FormGroup({
       'name': new FormControl(this.users[0].data[0].name),
       'category': new FormControl(this.users[0].data[0].category)
    }));

      let userFormArr = <FormArray>this.myForm.controls.users;
      userFormArr.push(this.fb.group({
          name: this.users[0].name,
          displayOrder: this.users[0].displayOrder,
          sort: new FormGroup({ 
              type:new FormControl(this.users[0].sort.type), // input your values here
              format: new FormControl(this.users[0].sort.format)
          }),
          data: formDataArr
      }));
}

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

Material design in Angular 8 only becomes available once the server has been restarted

While trying to learn Angular 8 with material design, I encountered a problem. I decided to use an example code from the Angular Material documentation available at https://material.angular.io/components/input/overview. The code snippet I used looked like ...

What is the correct way to implement ramda's ifElse function in typescript?

My attempt to enhance the typing of ifElse in Ramda, which currently has a type definition as follows: export function ifElse(fn: Pred, onTrue: Arity2Fn, onFalse: Arity2Fn): Arity2Fn; However, I quickly reached the limitations of TypeScript (or rather my ...

What is the best way to simulate a dynamoDB call using jest?

In a simple Handler, I have calls to getData defined in a separate file export const handler = async (event: APIGatewayProxyEvent): Promise<APIGatewayProxyResult> => { let respData = await new DynamoDBClient().getData(123); return { status ...

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

I'm a newcomer to Next.js and TypeScript and I can't seem to find any helpful resources on resolving this particular issue: import Image from 'next/image'; export default function Item({ image }) { // <-- parameter image needs a &ap ...

The element 'mdb-range-input' is not recognized. To ensure that it is a valid Angular component, please confirm that it is included in this module

Trying to implement a md bootstrap slider using the following code: <mdb-range-input (rangeValueChange)="onRangeValueChange($event)" id="range" min="0" max="100"></mdb-range-input> The module imports section includes: MDBBootstrapModule.forR ...

Error Encountered: Unexpected Identifier in Angular 7 External jQuery Plugin

Struggling to convert a jQuery template to Angular7, I'm facing an issue with loading .js files from the assets folder in the original template to make it functional. Upon starting the application with: ng serve, I encounter the following error in th ...

The error message "Expression has been altered after being verified" in Angular 2

Within my template, I have a button that looks like this: <button type="button" class="mgmButton" (click)="onSave()" [disabled]="saveDisabled()">Save</button> The button's disabled status is determined by the saveDisabled function. sav ...

There is no mistake when using a value that falls outside of a TypeScript

Expecting to encounter a compile time error with this code, but it seems my understanding of enums is off... enum SortDirection { ascending = 1, descending = -1 } type IndexSpec = {[index: string]: SortDirection}; var i: IndexSpec = {thing: 3}; ...

Detecting Changes in Angular2 Component Attributes via Observables

When working with Angular 2 components that have input attributes defined using @Input, how can I create an observable to track changes to those input attributes (not to be confused with user input from a form)? export class ExampleComponent implement OnC ...

Exporting External JavaScript Variables in Angular 2 Using Typescript

In my Configuration JS file, I have defined some configuration variables. For example: var config = {url:"xyz.com"}; I need to access these configuration parameters throughout my application. I attempted to export the config variables like this: export ...

Exploring the MEAN Stack for a Fresh Take on Single Page Application Development

Currently, I have implemented the hash location strategy on my Angular 4 client-side application. The refresh functionality works fine in development mode, but when I compile it to production mode using ng build -prod, the refresh feature breaks and the pa ...

Utilizing Angular to Handle Multiple Sockets on a Single Client

Is it feasible to achieve this task? If not, kindly guide me in an alternative direction. I am managing a server that has the capability for multiple socket-io connections. The server produces a random number and transmits it to registered sockets. In th ...

Troubleshooting: Empty Rows displayed in PrimeNG Table

Experimenting with Angular 8 and the primeNG package, I'm facing an issue where I cannot retrieve values. Despite using the {{staff[col.field]}} syntax, I only get empty rows of data. However, when I utilize the interface definition like {{staff.Emplo ...

Encountering issues while attempting to integrate ngrx store following ESLint setup

I'm currently working on an Angular 13 application that already has ESLint set up. I recently added ngrx store and dev tools using the following commands: ng add @ngrx/store ng add @ngrx/store-devtools However, when I tried to add a store using t ...

Substitute this.bindMethod for function component

I have a class component that is structured like this: interface MyProps { addingCoord: any resetCoords: any } interface MyState { x: any y: any } class DrawerOld extends React.Component<MyProps, MyState> { width: number height: number ...

developing TypeScript classes in individual files and integrating them into Angular 2 components

We are currently putting together a new App using Angular2 and typescript. Is there a more organized method for defining all the classes and interfaces in separate files and then referencing them within angular2 components? import {Component, OnInit, Pi ...

Is it feasible to make a <mat-form-field> unfocusable?

Within my form field setup, a simple form field is presented: <mat-form-field> <mat-label>A label</mat-label> <input matInput type="text"/> </mat-form-field> By default, clicking on any part of the form field tr ...

Can a component's route be dynamically changed based on its state?

Within an Angular 12 application, there exists a component known as SignUpComponent: export class SignUpComponent implements OnInit { form: FormGroup; result: boolean; constructor(private formBuilder: FormBuilder, private userService: UserService) ...

What is the method for dynamically assigning a template to a component?

I'm currently working on a feature that allows a parent component to pass an optional template to a child component. The child component will then use that template or default to a fallback template if none is provided. Here's an example of what ...

What are the steps to download and connect an alternative version of Node using brew?

I originally installed node version 7.1.0 using brew, but now I want to revert back to version 4.4.6. The problem arises because I mistakenly unlinked the node thinking I didn't have npm. However, when I tried brew install npm, I received the followi ...