Angular Json Pipe TypeError: Converting circular structure to JSON

Question

I have been trying to follow along with an angular course and came across the following error while using ngform:

core.js:6237 ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'TView' | property 'blueprint' -> object with constructor 'LViewBlueprint' --- index 1 closes the circle

Following is the template html:

    <div class="container">
      <h2>User Settings</h2>
      <form #form="ngForm">
        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" name="name" class="form-control" placeholder="Name" />
        </div>
        <div class="form-check form-group">
          <input class="form-check-input" type="checkbox" value="" id="emailOffers">
          <label class="form-check-label" for="emailOffers">
                Email Special Offers
                </label>
        </div>
        <h5>User Interface Style</h5>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="InterfaceStyle" id="lightInterface" value="Light" checked>
            <label class="form-check-label" for="lightInterface">
                    Light
                    </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="InterfaceStyle" id="mediumInterface" value="Medium">
            <label class="form-check-label" for="mediumInterface">
                    Medium 
                    </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="InterfaceStyle" id="darkInterface" value="Dark">
            <label class="form-check-label" for="darkInterface">
                    Dark 
                    </label>
          </div>
        </div>
        <div class="form-group">
          <label for="subscriptionType">Subscription Type</label>
          <select class="form-control" id="subscriptionType">
            <option>Monthly</option>
            <option>Annual</option>
            <option>Lifetime</option>
          </select>
        </div>
        <div class="form-group">
          <label for="notes">Notes</label>
          <textarea class="form-control" id="notes" rows="3"></textarea>
        </div>
        <button class="btn btn-primary">Save</button>
      </form>
    </div>
    {{ form | json }}

Your blueprint value has circular reference, something like: let blueprint = {}; blueprint .b = blueprint ; — orbita
– orbita, Commented May 3, 2020 at 16:02
form model has lot of nested object that's why json pipe is not working if you want to print only form value try form.value | json — Chellappan வ
– Chellappan வ, Commented May 3, 2020 at 16:02
@Chellappanவ, I would like to print the entire form object — Prashant
– Prashant, Commented May 3, 2020 at 16:05

Suhas Parameshwara · Accepted Answer · 2020-05-03 16:11:25Z

8

It throws you this error because it has some circular dependency on the controls so it throws you this error. You can try out the printing the value of it.

To print the entire formobject you can use

 {{form.value | json}}

Stackblitz link => https://stackblitz.com/edit/angular-6-template-driven-form-validation-prcrob

edited May 3, 2020 at 16:11

answered May 3, 2020 at 16:06

Suhas Parameshwara

1,4749 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Json Pipe TypeError: Converting circular structure to JSON

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related