时间戳

首页 > 解决方案 > TypeError：将圆形结构转换为 JSON 属性“名称”关闭了圆圈

angular - TypeError：将圆形结构转换为 JSON 属性“名称”关闭了圆圈

问题描述

我在 Angular 8 中使用响应式表单将数据插入数据库，但我收到了这个错误TypeError: Converting circular structure to JSON。据说name财产是一个圆形结构，我无法找出原因。谁能帮我吗？提前致谢。

我的组件.ts

export class AddMainCategoryComponent implements OnInit {
    nm;
    desc;
    date;

    get name() {
        return this.addMCform.get('name')
    }

    get description() {
        return this.addMCform.get('description')
    }
    constructor(public mainCategoryService: MainCategoryService, private fb: FormBuilder) { }

    addMCform = this.fb.group({
        name: ['', [Validators.required, Validators.minLength(3)]],
        description: ['']
    })

    ngOnInit() {
    }

    addMain_categories() {
        let main_category = {
            nm: this.name,
            desc: this.description,
            date: new Date(),

        }
        this.mainCategoryService.addMain_categories(main_category).then(data => {
            console.log(data);
        })
    }
}

html 

<div class="container-fluid">
    <h2>Add main category</h2>
    <form [formGroup]="addMCform">
        <div class="form-group">
            <label>Name of main category</label>
            <input [class.is-invalid]="name.invalid && name.touched" formControlName="name" type="text"
                class="form-control" placeholder="Enter name of category">
            <div *ngIf="name.invalid && name.touched">
                <small *ngIf="name.errors?.required" class="text-danger"> name is required</small>
                <small *ngIf="name.errors?.minlength" class="text-danger"> name must be at least 3 characters </small>
            </div>
        </div>
        <div class="form-group">
            <label>Description:</label>
            <textarea class="form-control" rows="5" input type="textarea" formControlName="description"
                placeholder="Enter description"></textarea>
        </div>
        <button type="button" class="btn btn-primary" (click)="addMain_categories()">Add main category</button>
    </form>
</div>

标签： angularangular-reactive-forms

解决方案

this.name返回this.addMCform.get('name')这是一个表单控件。也一样this.description。在main_category中，您需要value整体传递而不是表单控件。

let main_category = {
    nm: this.name.value,
    desc: this.description.value,
    date: new Date()
};

推荐阅读