Angular - Utilizing Reactive Forms for Nested Object Binding

Question

Angular - Utilizing Reactive Forms for Nested Object Binding

I have created a FormGroup and initialized it with one formControlName called SerialNumber. The JSON structure for SerialNumber is as follows:

{
    "SerialNumber": {
        "snValue": "332432"
    }
}

I am struggling to bind the value of SerialNumber.snValue to the <input>. Instead of displaying 332432, I keep getting [object Object].

.ts code snippet

equipmentForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
     this.equipmentForm = this.fb.group({
     serialNumber: {"snValue": "332432"}
     })
}

.html snippet

<input type="text" formControlName="serialNumber" />

My main question is, how can I properly bind snValue in this scenario?

https://i.stack.imgur.com/j8v3d.png

angular typescript forms binding angular-reactive-forms

Answer 1

Answer №1

If you already have an object named obj, you can follow these steps:

obj = {
  "SerialNumber": {
    "snValue": "332432"
  }
};

ngOnInit(): void {
   this.equipmentForm = this.fb.group({
     serialNumber: [obj.SerialNumber.snValue]
   });
}

Answer 2

If you already have an object named obj, you can follow these steps:

obj = {
  "SerialNumber": {
    "snValue": "332432"
  }
};

ngOnInit(): void {
   this.equipmentForm = this.fb.group({
     serialNumber: [obj.SerialNumber.snValue]
   });
}

Angular - Utilizing Reactive Forms for Nested Object Binding

Answer №1

Similar questions

NPM: There are no valid TypeScript file rules specified

In JavaScript, loop through an array of arrays and combine them using the concat

The Subject<T> generic type needs to be provided with 1 type argument

Struggling to grasp the concept of Observable Catch closure scope in Angular2?

Module fails to load in the proper sequence

I am integrating and connecting my angular2 library with my primary project by placing it in the node_modules folder within the library's build directory. This process is expected to

Troubleshooting a recurring ajax problem with jQuery inside a pop-up dialog box

Issue NG0203 encountered during material import attempt

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

switch between choosing, including, and deleting

Modify every audio mixer for Windows

Is it possible to extract a single element from an array that is stored as a standard Observable?

Using Reactive Forms group in router-outlet

Incorporate OpenLayers 4 into your Angular 5 application

Is there any need for transpiling .ts files to .js when Node is capable of running .ts files directly?

Confirm the presence of a particular sub collection within Firebase/Firestore by returning true

Is it possible to submit a form through a JavaScript hotkey?

gulp-angular2 task is malfunctioning

AngularJS Constants in TypeScript using CommonJS modules

Ever tried asynchronous iteration with promises?