1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

'setValue' method is not working in Angular application

Discussão em 'Angular' iniciado por rosd, Outubro 8, 2024.

  1. rosd

    rosd Guest

    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. [​IMG]

    But the value 250 does not show in the form field.

    Continue reading...

Compartilhe esta Página