Angular - Reactive Forms - Binding object inside of object

Question

I created FormGroup and initialized FormGroup with one formControlName (SerialNumber). SerialNumber JSON looks like this:

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

I don't know how to bind SerialNumber.snValue to the <input>. I always get [object Object] instead of 332432.

.ts code

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

.html

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

My question is, how to bind snValue?

If you're going to use FormBuilder, use it properly. See: angular.io/guide/…. — R. Richards
– R. Richards, Commented Oct 17, 2021 at 11:36

Emilien · Accepted Answer · 2021-10-17 11:43:52Z

1

Let's say you already have your object obj, you can do this :

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

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

answered Oct 17, 2021 at 11:43

Emilien

2,7534 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Reactive Forms - Binding object inside of object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related