problem to update data at angular

Question

the problem is following when I will update the data of a client I have to enter again all the data but the data that is not used will be null I’m using the angular nodejs and mongodb the code is followed

    <form [formGroup]="registerForm" (ngSubmit)="registerUser(id)">
    <div class="form-row">
        <div class="col-md-1">
          <img  class="rounded-circle" src="../assets/images/default-user.png" width="80px" height="80px" alt="">
        </div>
        <div class="col-md-3">
      <input type="file" class="form-control-file" id="exampleFormControlFile1">
        </div>
        <div class="col-md-3">
      <h1 style="text-align:center;">New Custumor</h1>
      </div>
      <div class="col-md-5">
        <button class="btn btn-primary">
          <img  src="../assets/images/add_48.png"width="34px" height="34px"  alt="">
          Save And Close</button>
                  <button  class="btn btn-primary" >
                    <img  src="../assets/images/add_48.png"  width="34px" height="34px"alt="">
                    Save</button>
                  <button   class="btn btn-primary"  routerLink="/clientes">
                      <img  src="../assets/images/delete.jpg"  width="34px" height="34px"  alt="">
                    Cancel
                  </button>
      </div>
      </div>
      <div class="alert alert-success" id="erro" style="visibility:collapse;height:50px;"  name="erro">
        <small>Registration is Make With Sucess</small>
      </div>
      <div class="alert alert-danger" id="erro1" style="visibility:collapse;height:50px;" name="erro1">
      <small>Registration is Make With Error</small>
      </div>
    <br>
    <br>

    <input type="text" class="form-control" style="width:34px;height:34px"  value='{{id}}' readonly>
        <div class="form-group">
          <label for="Name"> Name of Customor</label>
          <input type="text" class="form-control" formControlName="name"  value="{{name}}">
        </div>
        <div class="form-group">
          <label for="Address"> Address</label>
          <input type="text" class="form-control" formControlName="address" value="{{address}}">
        </div>
        <div class="form-group">
          <label for="email"> Email</label>
          <input type="email" class="form-control" formControlName="email" value="{{email}}">
        </div>
        <div class="form-row">
          <div class="form-group col">
            <label for="Telephone">
                    Telephone
                    </label>
                  <input type="text" class="form-control" formControlName="telephone"  value="{{telephone}}">
          </div>
          <div class="form-group col">
            <label for="nif">Nif</label>
            <input type="text" class="form-control" formControlName="nif"  value="{{nif}}">
          </div>

        </div>
        <div class="form-row">
          <div class="form-group col">
            <label for="PostalCode">  Postal Code</label>
            <input type="text" class="form-control"  formControlName="postalcode" value="{{postalcode}}">
          </div>
          <div class="form-group col">
            <label for="Bi">Bi</label>
            <input type="text" class="form-control"  formControlName="bi"value="{{bi}}" >
          </div>

        </div>
    </form>

public registerForm: FormGroup
  constructor(private myfirstService:ClientesService,private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
        name: new FormControl('', [Validators.required]),
        address: new FormControl('', [Validators.required]),
              bi: new FormControl('', [Validators.required]),
                nif: new FormControl('', [Validators.required]),
                  telephone: new FormControl('', [Validators.required]),
                    postalcode: new FormControl('', [Validators.required]),
                  email: new FormControl('', [Validators.required,Validators.email])
//  idcliente: new FormControl('')


        }); }

  registerUser(id:any){
let name = this.registerForm.value.name;
let address= this.registerForm.value.address;
let telephone = this.registerForm.value.telephone;
let postalcode = this.registerForm.value.postalcode;
let email = this.registerForm.value.email;
let bi = this.registerForm.value.bi;
let nif = this.registerForm.value.nif;
 this.myfirstService.getupdate(id,name,address,telephone,postalcode,email,bi,nif).subscribe(data=>{
       if(data.success){
        console.log("deu")
       }
       else{
         console.log(" nao deu")
       }

  })
}
}

nodeindex

app.post('/api/updateCliente',async (req,res)=>{
  const {id,name,address,telephone,postalcode,email,bi,nif}= req.body
  const resp = await Clientes.findOne({_id:id})


if(!resp){

res.json({
success:false,
message:'invalid cliente'
});
}
else{

await resp.updateOne({
  name:name,
  address:address,
  email:email,
  telephone:telephone,
  postalcode:postalcode,
bi:bi,
nif:nif
})
res.json({
  success:true
});

}
})

The problem is this if I do not re-input all the data and output you give me in the console.log this 1 '' '' ' but if I re-enter the data again to base data and updated right my goal update the customer data without walking and fill out every form again what I’m doing wrong