I have a form that contains data that has not changed, such as the Id and the name. When I click Save, the typescript does not recognize this data in form if it is not changed. How do I get this data?
The problem is: I query an object in the database, I change only the name, but I can not get Id or age (which have not been changed).
Follow the HTML page code:
<navbar></navbar>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Cadastro de Professores</h3>
</div>
<div class="panel-body">
<form #f="ngForm" (ngSubmit)="submit(f)">
<div ngModelGroup="htmlProfessor" #htmlProfessor="ngModelGroup">
<input ngModel type="hidden" class="form-control" #Id="ngModel" name="Id" maxlength="200" data-validate="required,required,maxlength[200]" [value]="professor.Id" />
<div class="form-group col-md-3 cl">
<label class="control-label">Nome</label>
<input ngModel type="text" class="form-control" #Nome="ngModel" name="Nome" maxlength="200"
data-validate="required,required,maxlength[200]" [value]="professor.Nome"/>
</div>
</div>
<div class="form-group cl btn-acoes">
<button type="submit" class="btn btn-success">Gravar</button>
<button type="button" class="btn btn-primary">Novo</button>
<button type="button" class="btn btn-white" onclick="window.location.href='/lista-professores'">Cancelar</button>
</div>
</form>
</div>
</div>
Follow the typescript code:
import { Component, OnInit } from '@angular/core';
import { ListaProfessoresService } from './../services/lista-professores.service';
import { RequestOptions, Headers } from '@angular/Http';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'professores',
templateUrl: './professores.component.html',
styleUrls: ['./professores.component.css']
})
export class ProfessoresComponent implements OnInit{
public professor;
constructor(private service: ListaProfessoresService, private route: ActivatedRoute) {
this.professor = new Object;
}
ngOnInit(){
this.route.paramMap
.subscribe(params => {
if(params.has("id")){
this.get(params.get("id"));
}
});
}
get(id){
this.service.get(id)
.subscribe(response => {
this.professor = response;
});
}
submit(form){
this.professor = form.value.htmlProfessor;
console.log(form.value.htmlProfessor.Id);
console.log(this.professor.Id);
//quando o objeto não é alterado na tela, nenhum dado do objeto vem para o código.
//se eu altero o nome do objeto professor, o nome vem para o código, mas o Id não.
//o código abaixo é continuidade, mas em cima eu não consigo dar o console.log do Id
if (this.professor.Id !=""){
this.service.update(this.professor,
(response)=> {
this.professor = response.json();
});
}else{
this.service.create(this.professor,
(response)=> {
this.professor = response.json();
});
}
}
}
Thanks,