Take data that has not been changed in the form for the angular

Question

I have a form that contains data that hasn’t been changed, like the ID and the name. When I click save, typescript does not recognize this data in the form if it is not changed. How do I get this data?

The problem is: I query an object in the database, change only the name, but I can’t get the ID or age (which have not changed).

Follow the code of the HTML page:

<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(); 
      });        
    }
  }
}

Thank you,