serialize Object into FormControl – Angular/Typescript


This Content is from Stack Overflow. Question asked by Joel Mulé

I have an array of “addresses” and i show them like this.

<mat-form-field *ngIf="useSubstituteAddress" class="contact-form">
  <mat-label>Ersatz Adresse</mat-label>
  <mat-select [formControl]="contactDataForm.get('address')?.get('substituteAddress')! | asFormControl">
    <mat-option *ngFor="let address of assosiatedAddresses" [value]="address">
      {{address.postalcode}} {{}}, {{address.street}} {{address.housenumber}}

Im getting a substituteAddress from my backend and my goal is to display this address into my select.

So im doing this:

if (this.contactData.substituteAddress) {
            this.useSubstituteAddress = true;
            this.addressService.getAddressById(Number(this.contactData.substituteAddress?.id)).subscribe((address) => {

If I console.log through my Form it show’s the information.

My Form is looking like this:

contactDataForm = new FormGroup({
    address: new FormGroup({
        street: new FormControl('', Validators.required),
        housenumber: new FormControl('', Validators.required),
        postalcode: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        addressAddition: new FormControl(''),
        country: new FormControl('', Validators.required),
        contactAddress: new FormControl(true),
        substituteAddress: new FormControl()
    contact: new FormGroup({
        id: new FormControl(''),
        email: new FormControl('', Validators.required),
        phoneNumber: new FormControl(''),
        mobileNumber: new FormControl(''),
        notificationsEnabled: new FormControl(true),
        contactAddress: new FormControl()

When i visit my Website it should look like this.
Select View

But it just showing a blank Select.

Does somebody engaged this problem?


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?