Angular - Reactive Forms - Binding object inside of object-CodePudding

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?

CodePudding user response：

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]
   });
}