Question

升级到Angular 6.0.9后出现一个非常奇怪的错误。我的模板具有一个select，其中有一个值为“”的opnion和一个“ Select a Option”标签，而其他选项则由来自银行的列表生成。因此，当我需要清除表单时，我再次调用formBuilder。但是，当我清理表单时，会向api发出请求，并因此产生一个json错误，警告它无法序列化null值。在重置表单的过程中，我不会调用任何触发API的方法，因此我不确定该怎么做。值得一提的是，该应用程序仍然可以运行，但是它向用户显示错误消息，因为我有一个拦截器可以接收所有错误并在小吃店打印... 模板：零件：导出类DocumentoDetalheComponent实现OnInit { docForm：FormGroup； tiposDocumento：TipoDocumento []; documento：Documento =新的Documento（）; 构造函数私人fb：FormBuilder，私人tipoDocumentoService：TipoDocumentoService，私有documentoService：DocumentoService，私人路线：ActivatedRoute ）{} ngOnInit（）{ const idRota：字符串= this.route.snapshot.params [“ id”]; this.createFormGroup（）; this.tipoDocumentoService.findAll（）。subscribe（ obj => { this.tiposDocumento = obj; }，错误=> {} ）。退订; 如果（idRota！= null）{ this.documentoService.findById（idRota）.subscribe（ obj => { this.documento = obj; this.docForm.setValue（{ tipoDocumento：this.documento.tipoDocumento，简历：this.documento.resumo， observacao：this.documento.observacao }）; }，错误=> {} ）;} } onSubmit（）{ 让docTemp：Documento = this.docForm.value; this.documento.tipoDocumento = docTemp.tipoDocumento; this.documento.resumo = docTemp.resumo; this.documento.observacao = docTemp.observacao; 如果（this.documento.id == null）{ this.save（this.documento）; }其他{ this.update（this.documento）; } } 保存（documento：Documento）{ this.documentoService .insert（文档） .subscribe（响应=> console.log（响应））; } 更新（documento：Documento）{ this.documentoService.update（documento）.subscribe（response => console.log（response））; } createFormGroup（）{ this.docForm = this.fb.group（{ tipoDocumento：[“”，[Validators.required]]，简历：[“”，[Validators.required，Validators.minLength（5），Validators.maxLength（60）]]， observacao：[“”，[Validators.maxLength（500）]] }）; } limparForm（）{ this.createFormGroup（）; } 等于（tp1：TipoDocumento，tp2：TipoDocumento）{ 返回tp1.id === tp2.id } voltar（）{} } API错误： 2018-07-16 10：05：43.186 WARN 4996 --- [tomcat-http--5] .wsmsDefaultHandlerExceptionResolver：无法读取HTTP消息：org.springframework.http.converter.HttpMessageNotReadableException：JSON解析错误：无法构造实例“ br.mp.mpce.sge.domain.TipoDocumento”（尽管至少存在一个创建者）：没有用于从字符串值（''）反序列化的字符串参数构造函数/工厂方法；嵌套异常是com.fasterxml.jackson.databind.exc.MismatchedInputException：无法构造“ br.mp.mpce.sge.domain.TipoDocumento”的实例（尽管至少存在一个Creator）：没有用于构造字符串/构造函数的工厂方法从字符串值反序列化（''）在[来源：（PushbackInputStream）;行：1，列：579]（通过参考链：br.mp.mpce.sge.domain.Documento [“ tipoDocumento”]）

Answer 1

我找到了解决方案。问题出在我使用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>

错误+ JSON + <选择> + <选项>

1 个答案: