Error + JSON + <select> + <option>

Question

在我升级到Angular 6.0.9之后，我得到了一个非常奇怪的错误。我的模板有一个select，其中有一个值为"“的opnion和一个"Select an Option”标签，其他选项是由来自银行的列表生成的。

因此，当我需要清除表单时，我会再次调用formBuilder。但是，当我清理表单时，发生了对api的请求，因此出现了一个json错误，警告它不能序列化空值。

在表单重置期间，我没有调用任何触发API的方法，所以我不确定该怎么做。

值得一提的是，应用程序仍然可以工作，但它会向用户显示一条错误消息，因为我有一个拦截器，它可以接收所有错误并在快餐店中打印...

模板：

 <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>

组件：

export class DocumentoDetalheComponent implements OnInit {
  docForm: FormGroup;
  tiposDocumento: TipoDocumento[];
  documento: Documento = new Documento();

  constructor(
    private fb: FormBuilder,
    private tipoDocumentoService: TipoDocumentoService,
    private documentoService: DocumentoService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const idRota: string = this.route.snapshot.params["id"];

    this.createFormGroup();

    this.tipoDocumentoService.findAll().subscribe(
      obj => {
        this.tiposDocumento = obj;
      },
      error => { }
    ).unsubscribe;

    if (idRota != null){
    this.documentoService.findById(idRota).subscribe(
      obj => {
        this.documento = obj;

        this.docForm.setValue({
          tipoDocumento: this.documento.tipoDocumento,
          resumo: this.documento.resumo,
          observacao: this.documento.observacao
        });
      },
      error => { }
    );}
  }

  onSubmit() {
    let docTemp: Documento = this.docForm.value;
    this.documento.tipoDocumento = docTemp.tipoDocumento;
    this.documento.resumo = docTemp.resumo;
    this.documento.observacao = docTemp.observacao;


    if (this.documento.id == null) {
      this.save(this.documento);
    } else {
      this.update(this.documento);
    }
  }

  save(documento: Documento) {
    this.documentoService
      .insert(documento)
      .subscribe(response => console.log(response));
  }

  update(documento: Documento) {
    this.documentoService.update(documento).subscribe(response => console.log(response));
  }

  createFormGroup() {
    this.docForm = this.fb.group({
      tipoDocumento: ["", [Validators.required]],
      resumo: ["",[Validators.required, Validators.minLength(5), Validators.maxLength(60)]],
      observacao: ["", [Validators.maxLength(500)]]
    });
  }

  limparForm() {
    this.createFormGroup();
  }
  equals(tp1: TipoDocumento, tp2: TipoDocumento) {
    return tp1.id === tp2.id
  }
  voltar() {}
}

API错误：

2018-07-16 10:05:43.186  WARN 4996 --- [ tomcat-http--5] .w.s.m.s.DefaultHandlerExceptionResolver : Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot construct instance of `br.mp.mpce.sge.domain.TipoDocumento` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value (''); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `br.mp.mpce.sge.domain.TipoDocumento` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('')
 at [Source: (PushbackInputStream); line: 1, column: 579] (through reference chain: br.mp.mpce.sge.domain.Documento["tipoDocumento"])

Answer 1

我找到了解决方案。问题出在我的formGroup中，因为我使用的是ngSubmit，所以表单中的所有按钮都在提交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>