'setValue' method is not working in Angular application

Question

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.

Answer 1

Try

this.extrudedHeightForm.get('extrudedHeight').setValue(data['extrudedHeight']);

You should set value on FormControl, not on FormGroup.

Answer 2

You are using two completely different forms. In your template you have a template-driven form, whereas in your TS you have a reactive form, so of course when you set a value in your FormControl it will not reflect in your view. You need to actually use your reactive form in your template. Here's a simplified version:

<form [formGroup]="extrudedHeightForm">
  <input formControlName="extrudedHeight" />
</form>

Building of the form looks the same as you have in your ts, i.e:

ngOnInit() {
  this.extrudedHeightForm = new FormGroup({
    extrudedHeight: new FormControl()
  });
}

and setting the value:

this.extrudedHeightService.getExtrudedHeight("default").subscribe((data: any) => {
  this.extrudedHeightForm.get('extrudedHeight').setValue(data.extrudedHeight);
});

In the above, don't use any as the type, but instead type your data as an interface or class.