Salvar com variável modelo

[guilhermecostalopes]

Nem vai para o servidor;

Componente

<p-confirmDialog></p-confirmDialog>
<p-toast position="top-right"></p-toast>
<p-messages [(value)]="msgs"></p-messages>
<p-breadcrumb [model]="items" [home]="home"></p-breadcrumb>

<form #f="ngForm" (ngSubmit)="salvar(f)">
  <input type="hidden" name="id" [(ngModel)]="modelo.id">
  <p-toolbar [style]="{'background':'#007ad9'}" id="codigoLabel">
    <font style="color: #f0f8ff">{{tituloMenu}} {{label}}</font>
  </p-toolbar>
  <p-tabView>
    <p-tabPanel header="Dados Principais">
      <p-toolbar [style]="{'background':'#FFFCFC'}" id="codigo">
        <div class="ui-g ui-fluid">
          <div class="ui-g-12 ui-md-6 ui-lg-4">
            <label for="login" class="first">Login *</label>
            <input type="text" id="login" name="login" pTooltip="Login" tooltipPosition="right"
              [(ngModel)]="modelo.login" maxlength="255" pInputText />
          </div>
        </div>
        <div class="ui-g ui-fluid">
          <div class="ui-g-12 ui-md-6 ui-lg-4">
            <label for="senha" class="first">Senha *</label>
            <input type="password" id="senha" name="senha" pTooltip="Senha" tooltipPosition="right"
              [(ngModel)]="modelo.senha" pPassword [(ngModel)]="property" />
          </div>
        </div>
        <div class="ui-g ui-fluid">
          <div class="ui-g-12 ui-md-6 ui-lg-4">
            <label for="confirmacaoSenha" class="first">Confirme a Senha *</label>
            <input type="password" id="confirmacaoSenha" name="confirmacaoSenha" pTooltip="Confirme a Senha" tooltipPosition="right"
              [(ngModel)]="modelo.confirmacaoSenha" pPassword [(ngModel)]="property" />
          </div>
        </div>
      </p-toolbar>
    </p-tabPanel>
    <p-tabPanel header="Grupos de usuários">
      <p-toolbar [style]="{'background':'#FFFCFC'}" id="Seguranca">
        <div class="ui-g ui-fluid">
          <div class="ui-g-10">
            <p-pickList [source]="todosGrupos" [target]="gruposSelecionados" sourceHeader="Todos grupos" 
              pTooltip="Grupos de usuários" tooltipPosition="right"
              targetHeader="Grupos selecionado *" [responsive]="true" dragdrop="true" dragdropScope="todosGrupos">
              <ng-template let-grupo pTemplate="item">
                <div class="ui-helper-clearfix">{{grupo.descricao}}</div>
              </ng-template>
            </p-pickList>
          </div>
        </div>
      </p-toolbar>
    </p-tabPanel>
    <p-tabPanel header="Perguntas e Respostas">
      <p-toolbar [style]="{'background':'#FFFCFC'}" id="perguntasRespostas">
        <div class="ui-g ui-fluid">
          <div class="ui-g-6 ui-md-6 ui-lg-4">
            <label for="pergunta" class="first">Pergunta *</label>
            <input type="text" id="pergunta" name="pergunta" pTooltip="Pergunta" tooltipPosition="right"
              [(ngModel)]="pergunta" maxlength="255" pInputText />
          </div>
          <div class="ui-g-6 ui-md-6 ui-lg-4">
            <label for="resposta" class="first">Resposta *</label>
            <input type="text" id="resposta" name="resposta" pTooltip="Resposta" tooltipPosition="right"
              [(ngModel)]="resposta" maxlength="255" pInputText />
          </div>
        </div>
        
        <button pButton type="button" class="ui-button-info" icon="pi pi-ban" 
          label="Limpar" (click)="limparPerguntaReposta()" pTooltip="Limpar Pergunta e Resposta" tooltipPosition="right">
        </button>
        
        <button pButton type="button" class="ui-button-info" icon="pi pi-save" 
          label="Adicionar" (click)="adicionarPerguntaReposta()" pTooltip="Adicionar Pergunta e Resposta" tooltipPosition="right">
        </button>

        <button pButton type="button" class="ui-button-info" icon="pi pi-trash" 
          label="Deletar" (click)="deletarPerguntaReposta()" pTooltip="Deletar Pergunta e Resposta" tooltipPosition="right">
        </button>

        <p-table #dt [value]="modelo.usuariosPerguntasRespostas" [rows]="10" [resizableColumns]="true"
          [paginator]="true" [pageLinks]="5" [responsive]="true" [(selection)]="selecaoPerguntaResposta"
          dataKey="id" [lazy]="true">
          <ng-template pTemplate="header">
            <tr [pSelectableRow]="rowData">
              <th style="width: 3em"></th>
              <th width="50%">Pergunta</th>
              <th width="50%">Resposta</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-item let-columns="columns">
            <tr [pSelectableRow]="item">
              <td>
                <p-tableRadioButton [value]="item"></p-tableRadioButton>
              </td>
              <td>{{item.pergunta}}</td>
              <td>{{item.resposta}}</td>
            </tr>
          </ng-template>
          <ng-template pTemplate="summary">
            Total de registros: {{modelo.usuariosPerguntasRespostas?.length}}
          </ng-template>
        </p-table>

        
      </p-toolbar>
    </p-tabPanel>
  </p-tabView>
  <h4>Campos com * são obrigatórios !</h4>
  <br />
  <p-button type="submit" icon="pi pi-save" label="Salvar" pTooltip="Salvar" 
    tooltipPosition="right"></p-button>
  <button pButton type="button" class="ui-button-info" icon="pi pi-ban" 
    label="Limpar" (click)="limpar()" pTooltip="Limpar" tooltipPosition="right"></button>
</form>

Para salvar

salvar(form){
if(this.alteracao){
this.modelo.usuariosGrupos = [];
this.gruposSelecionados.forEach(
grupo => {
let usuarioGrupo = new UsuarioGrupo();
usuarioGrupo.usuario = this.modelo;
usuarioGrupo.grupo = grupo;
this.modelo.usuariosGrupos.push(usuarioGrupo);
}
);
}
JSON.stringify(this.modelo);
this.servico.salvar(this.modelo).subscribe(
(data :any) => {
this.mensagemTela(data.tipoMensagem.tipo, data.tipoMensagem.sumario, data.tipoMensagem.mensagem);
}, err => {
this.mensagemTela('error', 'Mensagem de erro', 'Erro no servidor !');
}
);
}

Estou com este erro, peguei no console do navegador

UsuarioFormComponent.html:6 ERROR TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at UsuarioFormComponent.salvar (usuario-form.component.ts:160)
    at Object.eval [as handleEvent] (UsuarioFormComponent.html:6)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:12343)
    at SafeSubscriber.schedulerFn [as _next] (core.js:4354)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
View_UsuarioFormComponent_0 @ UsuarioFormComponent.html:6
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
dispatchEvent @ core.js:10008
(anonymous) @ core.js:12343
schedulerFn @ core.js:4354
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4322
NgForm.onSubmit @ forms.js:5764
(anonymous) @ UsuarioFormComponent.html:6
handleEvent @ core.js:13589
callWithDebugContext @ core.js:15098
debugHandleEvent @ core.js:14685
dispatchEvent @ core.js:10004
(anonymous) @ core.js:10629
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4751
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
UsuarioFormComponent.html:6 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 16, nodeDef: {…}, elDef: {…}, elView: {…}}

O que pode ser ?

[iamfelipemattos]

brother, ajeita esse código ai em um codepen, gist e afins... esta dificil a leitura.