Отображение данных ngForm через проект Json Pipe Angular 9 без отображения каких-либо данных. Преобразование круговой структуры в JSON ОШИБКА

Question

Я пытаюсь отобразить данные ngForm в файле HTML, используя канал Json в моем проекте Angular 9.

Результат, который я получаю sh из приведенного ниже кода должно быть

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

Я пробовал это:

{{ form.value | json }}

, и я также пробовал

{{ form| json }}

для отображения все angular ngForm данные, но все равно не повезло.

На моем HTML ничего не отображается, но если я делаю {{form}}, я получаю [object object].

Примечание: МОДУЛЬ ФОРМ импортирован .

Ошибка, которую я получаю на консоли:

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 код:

<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>

Answer 1

Чтобы решить ошибку кругового объекта, я основывал свой ответ на https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples, вам нужно добавить настраиваемый канал с именем что-то вроде: circle-object-to- json .pipe.ts и добавить код:

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

Не забудьте добавить новый канал в массив объявлений в app.module.ts:

@NgModule({
    declarations: [
        CircularObjectToJsonPipe,
    ],

Перепишите форму:

<code><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 }}

{{form.value | json}}

И добавьте функцию onSubmit в свой component.ts:

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