Form data passing as null except for the data updated inputs in angular 4

I have form which has 2 fields and I assigned default value to those inputs when the page loads, When I Submit the form by changing one input field, the updated input has the value in request while the other field remains null. How do I get all the default values assigned for the inputs along with the updated inputs when I submit the form.

I have the following code:

abc.component.html

<form #orgUpdateForm=ngForm class="form" (submit)="onOrganizationFormSubmit()" method="PUT">
     <div class="form-group" style="padding:0">
       <label class="control-label">Organization Name</label>
       <input class="form-control ng-touched" type="text" name="organization_name" value="{{organization.organization_name}}" [(ngModel)]="orgForm.organization_name">
     </div>

     <div class="form-group" style="padding:0">
       <label class="control-label">Number of Branches</label>
       <input class="form-control ng-touched" type="number" name="num_branches" value="{{organization.num_branches}}" min="0" [(ngModel)]="orgForm.num_branches">
      </div>
      <br/>
      <div class="col-md-2 col-sm-4 col-xs-4" style="padding:0">
        <input class="btn" type="submit" value="Update" style="background:transparent;border:1px solid black">
      </div><br/>
 </form>

abc.component.ts

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';
import '../../../assets/js/preferences.js';
import { JarwisService } from '../../services/jarwis.service.js';

@Component({
  selector: 'app-preferences',
  templateUrl: './preferences.component.html',
  styleUrls: ['./preferences.component.css'],
  providers: [JarwisService]
})
export class PreferencesComponent implements OnInit {

  organization:any;
  user:any;
  orgUpdateResponse:any;

  orgName : any;
  numBranches : any;

  public orgForm = {
    organization_name : this.orgName,
    num_branches : this.numBranches
  }

  constructor(
    private Jarwis:JarwisService
  ) { }

  ngOnInit() {

    this.Jarwis.getOrganizationDetails().subscribe(
      data => {
        this.organization = data;
      }
    )

    $.preferences.activate();

  }

  organizationForm(){
    this.Jarwis.getOrganizationDetails().subscribe(
      data => {
        this.organization = data;
      }
    )
  }

  onOrganizationFormSubmit(){
    this.Jarwis.setOrganizationDetails(this.orgForm).subscribe(
      data => {
        this.organization = data
      }
    )
  }

  branchesForm(){
    this.Jarwis.getBranches().subscribe(
      data => {
        this.organization = data;
      }
    )
  }

}

Here is the sample working example.

Note:- Iam binding using two way data binding method. removed value={{}} attribute..

sample.html file

<form #orgUpdateForm="ngForm" class="form" (submit)="onOrganizationFormSubmit(orgUpdateForm.value)">
  <div class="form-group" style="padding:0">
    <label class="control-label">Organization Name</label>
    <input class="form-control ng-touched" type="text" name="organization_name"  [(ngModel)]="organization.organization_name">
  </div>

  <div class="form-group" style="padding:0">
    <label class="control-label">Number of Branches</label>
    <input class="form-control ng-touched" type="number" name="num_branches" min="0" [(ngModel)]="organization.num_branches">
   </div>
   <br/>
   <div class="col-md-2 col-sm-4 col-xs-4" style="padding:0">
     <input class="btn" type="submit" value="Update" style="background:transparent;border:1px solid black">
   </div><br/>
</form>

sample.ts file

export class SampleComponent  {
  organization:any;

  constructor() {

//here iam assigning default values in constructor. you assign value wherever in your logics.

    this.organization={
      organization_name:"Sample",
      num_branches:10
    };
  }

  onOrganizationFormSubmit(FormValue:any)
  {
    console.log("Form Value From Inputs",FormValue);
  }
}

Your problem has been solved iam tested. let try this once pls.

Thanks,