Send readonly input value to server(MEAN stack)

I have a form which has one readonly and other normal fields like name, height, weight, DOB. I am unable to send the value of read-only field to the server(MongoDB). Without the read-only field, I tried sending the form and its working fine.                    

I get error

> "failed{"errors":{"id":{"message":"Path id is req…Path id is
> required.","name":"ValidationError"}"}

when i try with readonly field.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

export class HomeComponent {
getname=localStorage.getItem('key');
id = Date.now()
constructor(private service:RecordService) { }
onsubmit(form: NgForm) {
this.service.postRecords(form.value).subscribe(res => {
console.log(res);
});
}
}

<!-- language: lang-html -->

<div class="container">
<h2 class="text-center">Welcome {{getname}}</h2>
<form  #myForm="ngForm" (ngSubmit)="onsubmit(myForm); myForm.reset()">
<div class="form-group"> 
<label>Member ID</label>
<input  type="number" name="id" [value]="id" class="form-control" readonly>
</div>
<div class="form-group"> 
<label for="name">Name</label>
<input ngModel required name="name" pattern="[A-za-z]+" #name="ngModel" minlength="4" type="text" class="form-control" id="name">
<div class="alert alert-danger" *ngIf="name.touched && !name.valid">
<div *ngIf="name.errors.required">Name is required.</div>
<div *ngIf="name.errors.minlength">Name requires atleast 4 characters.</div>
<div *ngIf="name.errors.pattern">Name should contain only alphabets without space.</div>
</div>
</div>
<div class="form-group"> 
<label for="dob">Date of Birth</label>
<input  type="date" class="form-control" id="dob" name="dob" #dob="ngModel" ngModel required>
<div class="alert alert-danger" *ngIf="dob.touched && !dob.valid">
<div *ngIf="dob.errors.required">Date of Birth is required.</div>
</div>
</div>
<div class="form-group"> 
<label for="height">Height</label>
<input  type="number" placeholder="Enter in cms" class="form-control"  id="height" name="height" #height="ngModel" ngModel required>
<div class="alert alert-danger" *ngIf="height.touched && !height.valid">
<div *ngIf="height.errors.required">Height is required.</div>
</div>
</div>
<div class="form-group"> 
<label>Weight</label>
<input  type="number" placeholder="Enter in Kilograms" class="form-control" id="weight" name="weight" #weight="ngModel" ngModel required>
<div class="alert alert-danger" *ngIf="weight.touched && !weight.valid">
<div *ngIf="weight.errors.required">Weight is required.</div>
</div>
</div>
<!-- <a routerLink="/table">    -->
<button type="submit"class="btn btn-success" [disabled]="!myForm.form.valid">Submit</button> 
<!-- </a> -->
   <button type="submit" class="btn btn-success" (click)=" myForm.reset()">Reset</button>
</form>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

export class Record{
id:Number;
name:String;
dob:String;
height:Number;
weight:Number;
}

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const mongoose = require("mongoose");
const schema = mongoose.Schema({
id: {
type: Number,
required: true
},
name: {
type: String,
required: true
},
dob: {
type: String,
required: true
},
height: {
type: Number,
required: true
},
weight: {
type: Number,
required: true
}
});
const Records = (module.exports = mongoose.model("Records", schema));

<!-- end snippet -->

you can use the "disabled" instead-of "readonly"

I figured it out I just changed

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<input  type="" name="id"  [value]="id" class="form-control" readonly>

<!-- end snippet -->

to

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<input  type="" name="id"  [(ngModel)]="id" class="form-control" readonly>

<!-- end snippet -->

There are two ways to do the Job:

1. You can create a hidden field for the readonly field whose value will be binded with the readonly field so once you submit the form the hidden input will be passed.[ Remember to give the name attribute you want to pass to the hidden field rather than the readonly field as the hidden field will be passed and not eh readonly field].

2. Second way is to remove the disable property from all the input at the time your are subumitting your form. In this way you can send the value of all the inputs.