Angular Json管道类型错误:将循环结构转换为Json

Question

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

core.js:6237错误类型错误：将循环结构转换为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}}

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