I am developing a web application using MEAN Stack with Angular 6. There I have a button in my html to get default values when I click that button it should fill the form field with the default value. Here is my html form. <div style="float: right" id="extrudedHeightPanel" *ngIf="isExtrudedHeight" name="extrudedHeight"> <form #extrudedHeightForm="ngForm" (ngSubmit)="saveExtrudedHeightValue(extrudedHeightForm)" #form="ngForm"> <nb-card class="action-buttons"> <div class="form-input-group"> <div class="row"> <div class=""> <button type='button' (click)="setDefaultValues()" class="btn btn-sm btn-rectangle btn-default text-case">Restore Default</button> </div> <div class=""> <button type="submit" class="btn btn-sm btn-rectangle btn-default text-case">Done</button> </div> </div> </div> </nb-card> <br> <br> <br> <p>Extruded Height</p> <br> <div class="form group"> Extruded Height: <input type="text" nbInput name="extrudedHeight" [(ngModel)]="extrudedHeight" /> </div> </form> </div> I got the data from mongo db to my .ts file and tried to set value to the form field using 'setValue' method in Angular. .ts file class{ extrudedHeightForm: FormGroup; ngOnInit() { this.extrudedHeightForm = new FormGroup({ extrudedHeight: new FormControl() }); } //Set default values for extrudedHeight setDefaultValues() { this.extrudedHeightService.getExtrudedHeight("default").subscribe(data => { this.extrudedHeightForm.setValue({ extrudedHeight:data['extrudedHeight'] }); }); } } My question is the following part is not working. Am I gone wrong or is there any method to achieve my requirement. this.extrudedHeightForm.setValue({ extrudedHeight:data['extrudedHeight'] }); --UPDATED-- When I changed into this.extrudedHeightForm.get('extrudedHeight').setValue(data['extrudedHeight']); as suggested in the answer it does not work either. To check the value I printed a console.log. 'console.log(this.extrudedHeightForm.get('extrudedHeight'));' part gives the following values. But the value 250 does not show in the form field. Continue reading...