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

Answer 1

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