When creating a reactive form in Angular using FormControl objects in a FormGroup, I encountered an issue. While passing primitive arguments as values for an HTML input select control works fine, when passing an object of a self-defined class, the value in the FormControl gets reduced to [object Object].
The system setup I am working with includes: Angular CLI: 7.1.4; Node: 10.15.0; Angular: 7.1.4; rxjs 6.3.3; typescript 3.1.6; webpack 4.23.1; Linux rdz1 4.15.0-43-generic #46-Ubuntu SMP Thu Dec 6 14:45:28 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-header-notes',
templateUrl: './header-notes.component.html',
styleUrls: ['./header-notes.component.css']
})
export class HeaderNotesComponent implements OnInit {
ndcForm = new FormGroup({
noteType: new FormControl(''),
noteDate: new FormControl(''),
noteFor: new FormControl(''),
noteTo: new FormControl(''),
noteDetail: new FormControl(''),
noteDetailVal: new FormControl(''),
noteChkRefInvoice: new FormControl('')
});
ngOnInit() { this.onChanges(); }
onChanges(): void{
this.ndcForm.valueChanges
.subscribe( val => console.log(val))
}
}
Upon observing the console output like: {noteType: "credit", noteDate: "2019-01-01", noteTo: [object Object], ... }
I provided an object {param1: val1, parm2: val2} to "noteTo," expecting to see this value in the console. However, it shows [object Object] instead. It seems like the object has been stringified.