json - 错误 + JSON +

我找到了解决方案。问题出在我使用 ngSubmit 的 formGroup 中，所以我的表单中的所有按钮都在提交 API 请求。因此，解决方案是从表单中删除 ngSubmir，并在事件（单击）时手动设置必要的方法。

<form [formGroup]="docForm" novalidate>
  <div class="card">
    <div class="card-body">
      <div class="form-group row" *ngIf="documento?.id != null">
        <div class="form-group col-md-3">
          <label for="setor">Nº Protocolo: </label>
        </div>
        <div class="form-group col-md-6">
          {{documento?.codigo}}/{{documento?.ano}}
        </div>
      </div>
      <div class="form-group row" *ngIf="documento?.id != null">
        <div class="form-group col-md-3">
          <label for="setor">Setor cadastro: </label>
        </div>
        <div class="form-group col-md-6">
          {{documento?.setorCadastro?.nome}}
        </div>
      </div>

      <div class="form-group row">
        <div class="form-group col-md-3">
          <label for="selectTipoDocumento">Tipo de Documento: </label>
        </div>
        <div class="form-group col-md-6">
          <select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
          [class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)"
          [class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)">
            <option value="">Selecione um tipo</option>
            <option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
          </select>
        </div>
        <div class="form-group col-md-3 invalid-feedback d-block"
        *ngIf="!this.docForm.controls['tipoDocumento'].valid && (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)">
          Tipo dodocumento é obrigatório
        </div>
      </div>
      <div class="form-group row">
        <div class="form-group col-md-3">
          <label for="inputResumo">Resumo: </label>
        </div>
        <div class="form-group col-md-6">
          <input type="text" class="form-control" id="inputResumo" formControlName="resumo" placeholder="Resumo do documento" maxlength="60"
            autocomplete="off"
            [class.is-valid]="this.docForm.controls['resumo'].valid && (this.docForm.controls['resumo'].touched ||  this.docForm.controls['resumo'].dirty)"
            [class.is-invalid]="!this.docForm.controls['resumo'].valid && (this.docForm.controls['resumo'].touched ||  this.docForm.controls['resumo'].dirty)">
        </div>
        <div class="form-group col-md-3 invalid-feedback d-block"
        *ngIf="!this.docForm.controls['resumo'].valid && (this.docForm.controls['resumo'].touched ||  this.docForm.controls['resumo'].dirty)">
          Resumo é obrigatório (5 a 60 caracteres)
        </div>
      </div>
      <div class="form-group row">
        <div class="form-group col-md-3">
          <label for="inputObservacao">Observação: </label>
        </div>
        <div class="form-group col-md-6">
          <textarea type="text" class="form-control" id="inputObservacao" formControlName="observacao" rows="5">
      </textarea>
        </div>
      </div>
      <div class="form-group row">
        <div class="form-group col-md-3">
        </div>
        <div class="form-group col-md-2">
          <button class="btn btn-primary btn-block" (click)="limparForm()">Limpar</button>
        </div>
        <div class="form-group col-md-2">
          <button class="btn btn-success btn-block"[disabled]="!docForm.valid" (click)="onSubmit()">Salvar</button>
        </div>
        <div class="form-group col-md-2">
          <a class="btn btn-primary btn-block" [routerLink]="['/']">Voltar</a>
        </div>
      </div>
    </div>
  </div>
</form>