Display ngForm data via Json Pipe Angular 9 project not showing any data. Converting circular structure to JSON ERROR

user_8340709 0
Viewed 1404

I am trying to display my ngForm data in the HTML file using the Json pipe in my Angular 9 project.

The result I wish to get from the below code should be

{"name":"name input","contactNumber":"07123" }

I tried this:

{{ form.value | json }}

and I have also tried

{{ form| json }}

to display all angular ngForm data, but still no luck.

On my HTML nothing is being shown, but if I do {{form}}, I get [object object].

Note: FORMS MODULE is imported.

The error I am getting on the console:

VM21 vendor.js:15247 ERROR TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'TView'
    |     property 'blueprint' -> object with constructor 'LViewBlueprint'
    --- index 1 closes the circle
    at JSON.stringify (<anonymous>)
    at JsonPipe.transform (VM21 vendor.js:5866)
    at Module.ɵɵpipeBind1 (VM21 vendor.js:43023)
    at BookingFormComponent_Template (VM20 main.js:579)
    at executeTemplate (VM21 vendor.js:20324)
    at refreshView (VM21 vendor.js:20171)
    at refreshComponent (VM21 vendor.js:21609)
    at refreshChildComponents (VM21 vendor.js:19900)
    at refreshView (VM21 vendor.js:20223)
    at refreshComponent (VM21 vendor.js:21609)

HTML code:

<form #form="ngForm" class="box p-4 mx-lg-0 mx-1 mb-3 rounded font-weight-bold">
<div class="form-group">
<label for="clientName">Name</label>
<input id="clientName"  placeholder="Enter your name!" ngModel/>
</div>
<div class="form-group">
<label for="contactNumber">Contact Number</label>
<input id="contactNumber"  placeholder="Enter your contact number!" ngModel/>
</div>
<h3>{{ form | json }}</h3>
<h3>{{ form.value | json }}</h3>
angular typescript pipe html json
1 Answers

To solve the circular object error I based my answer on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples , you need to add a custom pipe named something like: circular-object-to-json.pipe.ts and add the code:

import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({ name: 'circularObjectToJsonPipe' })
    export class CircularObjectToJsonPipe implements PipeTransform {
        transform(circularObj: any): any {

            const getCircularReplacer = () => {
                const seen = new WeakSet();
                return (key, value) => {
                    if (typeof value === "object" && value !== null) {
                        if (seen.has(value)) {
                            return;
                        }
                        seen.add(value);
                    }
                    return value;
                };
            };

            return JSON.stringify(circularObj, getCircularReplacer());
        }
    }

Don't forget to add the new pipe to the declarations array in app.module.ts:

@NgModule({
    declarations: [
        CircularObjectToJsonPipe,
    ],

Rewrite your form:

<form
    #form="ngForm"
    (ngSubmit)="onSubmit(form.value)"
    class="box p-4 mx-lg-0 mx-1 mb-3 rounded font-weight-bold"
>

    <div class="form-group">
        <label for="clientName">Name</label>
        <input
            name="clientName"
            ngModel
            placeholder="Enter your name!"
        />
    </div>

    <div class="form-group">
        <label for="contactNumber">Contact Number</label>
        <input
            name="contactNumber"
            ngModel
            placeholder="Enter your contact number!"
        />
    </div>

    <button type="submit">Submit</button>

    <pre style="font-size: 1rem; white-space: pre-wrap;">{{ form | circularObjectToJsonPipe }}</pre>

    <h3>{{ form.value | json }}</h3>

</form>

And add onSubmit function in your component.ts:

onSubmit(formValues) {
    console.log(formValues);
}
user_123995530
Related