Angular Form nested objects

Question

I have a form where the user enters some data, then sends a POST. Now I am working on a feature to allow editing of previously entered information. Some of the inputs in the fields have nested objects, as:

export class Transfer {
    constructor(
        public id: number,
        public destination: string,
        public market: string,
        public project: Project,
        public workstream: Workstream,
        public contact: Contact
    )
}

export class Workstream {
    constructor(
        public id: number,
        public workStream: string
    ) { }
}

export class Contact {
    constructor(
        public id: number,
        public name: string
    ) { }
}

When loading the information to the form, fields containing strings or numbers work well, but objects don't show the correct information. The field for Contact gives me a [object Object], while Workstream does not preselect the right option from a drop down.

            <!-- Workstream -->
            <mat-form-field class="example-full-width">
                <mat-label>Workstream</mat-label>
                <mat-select [(ngModel)]="transfer.workstream" name="workstream" [(value)]="transfer.workstream">
                    <mat-option *ngFor="let workstream of workstreams$ | async" [value]="workstream">
                        {{workstream.workStream}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <!-- Contact -->
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Contact" [(ngModel)]="transfer.contact" name="contact" value="transfer.contact.name"
                #contactSearchBox (input)="searchContact(contactSearchBox.value)" [matAutocomplete]="auto">
            </mat-form-field>

            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let contact of contacts$ | async" [value]="contact.name"
                    (click)="selectContact(contact)">
                    {{contact.name}}
                </mat-option>
            </mat-autocomplete>

In the contact field the user is able to search by name, which works. Any clues on how to implement this? Thanks!

score 0 · Answer 1 · answered Feb 17 '20 at 15:30

0

mat-option should have a string value. So the binding[value]="workstream", should be changed to [value]="workstream.workStream". This should work. However, if you need an entire object to be stored, then you should go with autocomplete component to store the entire object as a model in the form, and use viewFormatter function to display only the fields that you want (in the autocomplete results or the shown selected object).

answered Feb 17 '20 at 15:30

Superiom

388
5
18

I still get the same result. But I will investigate using autocomplete, thanks! – Kluckmuck Feb 18 '20 at 07:30

score 0 · Answer 2 · answered Feb 18 '20 at 12:47

Fixed both issues, thanks to Badis Merabet and Angular Material.

To fix my drop down, I added [compareWith]="compareObjects" to mat-select, and used the same function described in the link.

My search bar was fixed by adding [displayWith]="displayFn" to mat-autocomplete, using the same technique as done in Angular Material.

Angular Form nested objects

2 Answers2