Alexsandro_Andrade 11 de jun. de 2021
< form #clienteForm = "ngForm" ( ngSubmit ) = "salvar()" >
< div class = "form-group row" >
< div class = "col-md-12" >
< div class = "alert alert-success alert-dismissible fade show" role = "alert" * ngIf = "msgSuccess" >
Cliente salvo / atualizado com sucesso !
< button type = "button" class = "close" data - dismiss = "alert" aria - label = "Close" >
< span aria - hidden = "true" >& times ; </ span >
</ button >
</ div >
< div class = "alert alert-danger alert-dismissible fade show" role = "alert" * ngFor let erro of errors >
{{ error }}
< button type = "button" class = "close" data - dismiss = "alert" aria - label = "Close" >
< span aria - hidden = "true" >& times ; </ span >
</ button >
</ div >
</ div >
</ div >
< div class = "form-group row" >
< div class = "col-md-12" >
< label > Nome </ label >
< input type = "text" class = "form-control" id = "nome" [ (ngModel) ]= "cliente.nome" name = "nome" >
</ div >
< div class = "col-md-5" >
< label > CPF </ label >
< input type = "text" class = "form-control" id = "cpf" [ (ngModel) ]= "cliente.cpf" name = "cpf" >
</ div >
< div class = "col-md-7" >
< label > Email </ label >
< input type = "text" class = "form-control" id = "email" [ (ngModel) ]= "cliente.email" name = "email" >
</ div >
< div class = "col-md-3" >
< label > Data de Nascimento </ label >
< input type = "text" class = "form-control" id = "dataNascimento" [ (ngModel) ]= "cliente.dataNascimento"
name = "dataNascimento" >
</ div >
< div class = "col-md-4" * ngIf = "cliente.id" >
< label > Data de Cadastro </ label >
< input disabled = true type = "text" class = "form-control" id = "dataCadastro" [ (ngModel) ]= "cliente.dataCadastro"
name = "dataCadastro" >
</ div >
< div class = "col-md-3" * ngIf = "cliente.id" >
< label > Situação </ label >
< select class = "custom-select" id = "inlineFormCustomSelectPref" id = "situacao" [ (ngModel) ]= "cliente.situacao"
name = "situacao" >
< option selected > Situação . </ option >
< option value = "A" > ATIVO </ option >
< option value = "I" > INATIVO </ option >
</ select >
</ div >
< div class = "col-md-4" >
< label > Contato 1 </ label >
< input type = "text" class = "form-control" id = "contato1" [ (ngModel) ]= "cliente.contato1" name = "contato1" >
</ div >
< div class = "col-md-4" >
< label > Contato 2 </ label >
< input type = "text" class = "form-control" id = "contato2" [ (ngModel) ]= "cliente.contato2" name = "contato2" >
</ div >
</ div >
< hr />
< div class = "form-group row" >
< div class = "col-md-12 mb-2" >
< label > ENDEREÇO </ label >
</ div >
< div class = "col-md-4" [ ngClass ]= aplicaCssErro ( cep ) >
< label > CEP </ label >
< input ( blur ) = "consultaCEP($event.target.value, clienteForm)" type = "text" class = "form-control" id = "cep"
[ (ngModel) ]= "cliente.endereco.cep" name = "cep" required #cep = "ngModel" >
< div * ngIf = "!cep.valid && cep.touched" class = "alert alert-danger alert-dismissible fade show"
role = "alert" >
O Campo CEP é obrigatório
< button type = "button" class = "close" data - dismiss = "alert" aria - label = "Close" >
< span aria - hidden = "true" >& times ; </ span >
</ button >
</ div >
</ div >
< div class = "col-md-2" >
< label > Numero </ label >
< input type = "text" class = "form-control" id = "numero" [ (ngModel) ]= "cliente.endereco.numero" name = "numero" >
</ div >
< div class = "col-md-6" >
< label > Complemento </ label >
< input type = "text" class = "form-control" id = "complemento" [ (ngModel) ]= "cliente.endereco.complemento"
name = "complemento" >
</ div >
< div class = "col-md-10" >
< label > Logradouro </ label >
< input disabled type = "text" class = "form-control" id = "logradouro" [ (ngModel) ]= "cliente.endereco.logradouro"
name = "logradouro" >
</ div >
< div class = "col-md-7" >
< label > Bairro </ label >
< input disabled type = "text" class = "form-control" id = "bairro" [ (ngModel) ]= "cliente.endereco.bairro"
name = "bairro" >
</ div >
< div class = "col-md-4" >
< label > Cidade </ label >
< input disabled type = "text" class = "form-control" id = "cidade" [ (ngModel) ]= "cliente.endereco.cidade.nome"
name = "cidade" >
</ div >
< div class = "col-md-4" >
< label > Estado </ label >
< input disabled type = "text" class = "form-control" id = "estado" [ (ngModel) ]= "cliente.endereco.cidade.nome"
name = "estado" >
</ div >
</ div >
</ form >
Lucas_Camara 11 de jun. de 2021
No angular, vc tem 2 abordagens para forms:
Aqui vc declara os detalhes do form no componente e referencia os campos na tela pela diretiva formControl em cada campo. No componente, vc instancia os formControls e já coloca os detalhes do campo, como validação, por exemplo.
Aqui os campos do form são tratado pela diretiva ngModel , onde vc faz o bind para a propriedade declarada no componente.
Cada abordagem tem sua aplicabilidade. Pelo seu código, parece que é um form reativo. Se for, vc deve colocar no campo um [(formControl)]="nome".
Recomendo que dê uma olhada nos links de cada tipo de form, pois lá há um exemplo de cada tipo.
Alexsandro_Andrade 11 de jun. de 2021
Obrigado pela explicação lucas, vou tentar e te digo
Alexsandro_Andrade 11 de jun. de 2021
lucas, aqui no meu caso estou tentando trabalhar apena com o template, como devo fazer nesse caso?
Lucas_Camara 11 de jun. de 2021 1 like
Basicamente é vc declarar uma propriedade no componente:
componente {
obj : Any = { } ;
}
E no html:
[ ( ng - model ) ]= "obj.propA"
[ ( ng - model ) ]= "obj.propB"
Ao fazer isso, o obj do componente será preenchido com os valores de acordo com os inputs do html.
