分2秒形成角度2

时间:2017-04-11 16:34:28

标签: angular http

我正在使用Angular 2将表单分隔到我的Spring Boot后端。 我在一个服务上调用create方法,该服务进行http post调用并订阅Observable。

this.clienteService.create(this.novoCliente)
            .subscribe((res: Response) => this.onSaveSuccess(res, res.headers), (res: Response) => this.onSaveError(res));

当我第一次提交表单时,一切都运行正常,我会在回调时得到我的回复,没有任何问题。

但是,如果我留在同一页面并尝试再次提交表单,而不是将我的网址更改提交到localhost:8080 / api / novo-cliente?name = test& age = 20

这是我的表格:

<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
  <div>
    <h2><span>Cliente</span></h2>
    <hr>
    <jhi-alert-error></jhi-alert-error>
    <dl class="row">      

         <dt><span>Conta</span></dt>
        <hr>
        <dt><span>Email</span></dt>
        <dd>           
            <input type="text" class="form-control" name="email" id="field_email"
                   [(ngModel)]="cliente.pessoa.email"
                   />           
        </dd>   


        <dt><span>Dados</span></dt>
        <hr>

        <dt><span>Nome</span></dt>
        <dd>           
            <input type="text" class="form-control" name="nome" id="field_nome"
                   [(ngModel)]="cliente.pessoa.nome"
                   />           
        </dd>

        <dt><span>Sobrenome</span></dt>
        <dd>          
            <input type="text" class="form-control" name="sobrenome" id="field_sobrenome"
                   [(ngModel)]="cliente.pessoa.sobrenome"
                   />           
        </dd>

        <dt><span>Nascimento</span></dt>
        <dd>
            <div class="input-group">
                <input id="field_nascimento" type="text" class="form-control" name="nascimento" ngbDatepicker  #nascimentoDp="ngbDatepicker" [(ngModel)]="cliente.pessoa.nascimento"
            />
                       <span class="input-group-btn">
                    <button type="button" class="btn btn-default" (click)="nascimentoDp.open()"><i class="fa fa-calendar"></i></button>
                </span>
            </div>
        </dd>

        <dt><span>Sexo</span></dt>
        <dd>
            <input type="text" class="form-control" name="sexo" id="field_sexo"
                   [(ngModel)]="cliente.pessoa.sexo"
                   />
        </dd>

        <dt><span>CPF</span></dt>
        <dd>
            <input type="text" class="form-control" name="cpf" id="field_cpf"
                   [(ngModel)]="cliente.pessoa.cpf"
                   />
        </dd>

        <dt><span>RG</span></dt>
        <hr>

        <dt><span>Número</span></dt>
        <dd>
            <input type="text" class="form-control" name="rg_numero" id="field_rg_numero"
                   [(ngModel)]="cliente.pessoa.rg.numero"
                   />
        </dd>

        <dt><span>Emissor</span></dt>
        <dd>
            <input type="text" class="form-control" name="rg_emissor" id="field_rg_emissor"
                   [(ngModel)]="cliente.pessoa.rg.emissor"
                   />
        </dd>

        <dt><span>Data de Emissão</span></dt>
        <dd>
            <div class="input-group">
                <input id="field_nascimento" type="text" class="form-control" name="rg_emissao" ngbDatepicker  #emissaoDp="ngbDatepicker" [(ngModel)]="cliente.pessoa.rg.dataEmissao"
                       />
                       <span class="input-group-btn">
                    <button type="button" class="btn btn-default" (click)="emissaoDp.open()"><i class="fa fa-calendar"></i></button>
                </span>
            </div>
        </dd>

        <br/>

        <dt><span>Nacionalidade</span></dt>
        <dd>
            <input type="text" class="form-control" name="nacionalidade" id="field_nacionalidade"
                   [(ngModel)]="cliente.pessoa.nacionalidade"
                   />
        </dd>

        <br/>

        <dt><span>Telefone</span></dt>
        <hr>

        <dt><span>DDD</span></dt>
        <dd>
            <input type="text" class="form-control" name="telefone_ddd" id="field_telefone_ddd"
                   [(ngModel)]="cliente.pessoa.telefones[0].ddd"
                   />
        </dd>

        <dt><span>Número</span></dt>
        <dd>
            <input type="text" class="form-control" name="telefone_numero" id="field_telefone_numero"
                   [(ngModel)]="cliente.pessoa.telefones[0].numero"
                   />
        </dd>

        <br/>

        <dt><span>Endereço</span></dt>
        <hr>

        <dt><span>CEP</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_cep" id="field_endereco_cep"
                   [(ngModel)]="cliente.pessoa.endereco.cep"
                   />
        </dd>

        <dt><span>Logradouro</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_logradouro" id="field_endereco_logradouro"
                   [(ngModel)]="cliente.pessoa.endereco.logradouro"
                   />
        </dd>

         <dt><span>Número</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_numero" id="field_endereco_numero"
                   [(ngModel)]="cliente.pessoa.endereco.numero"
                   />
        </dd>

         <dt><span>Complemento</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_complemento" id="field_endereco_complemento"
                   [(ngModel)]="cliente.pessoa.endereco.complemento"
                   />
        </dd>
         <dt><span>Bairro</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_bairro" id="field_endereco_bairro"
                   [(ngModel)]="cliente.pessoa.endereco.bairro"
                   />
        </dd>

         <dt><span>Cidade</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_cidade" id="field_endereco_cidade"
                   [(ngModel)]="cliente.pessoa.endereco.cidade"
                   />
        </dd>

         <dt><span>Estado (Sigla)</span></dt>
        <dd>
            <input type="text" class="form-control" name="endereco_estado" id="field_endereco_estado"
                   [(ngModel)]="cliente.pessoa.endereco.uf"
                   />
        </dd>


    </dl>

    <button type="button"
            (click)="previousState()"
            class="btn btn-info">
        <span class="fa fa-arrow-left"></span>&nbsp;<span> Voltar</span>
    </button>

     <button type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary" >
            <span class="fa fa-save"></span>&nbsp;<span> Salvar</span>
    </button>    
</div>

可能是什么问题?

0 个答案:

没有答案