Angular Json Pipe TypeError：将循环结构转换为 JSON

Question

我一直在尝试遵循有角度的路线，并在使用 ngform 时遇到以下错误：

core.js:6237 错误 TypeError: 将循环结构转换为 JSON --> 从构造函数“TView”的对象开始 | 属性 'blueprint' -> 具有构造函数 'LViewBlueprint' 的对象 --- 索引 1 闭合圆

以下是模板 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

它会向您抛出此错误，因为它对控件有一些循环依赖，因此它会向您抛出此错误。您可以尝试打印它的值。

要打印整个表单对象，您可以使用

 {{form.value | json}}

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