CODEWITHSUNDEEP
javascriptangularangular2-forms
Kiwi Rupela
Kiwi Rupela

Reputation: 2348

Angular 2 select tag with formControlName not working

Angular 2 select tag with formControlName not working. pmsList having data like as follows: [{id:1,pms:'test'},.......] but when in constructor I set:

this.pms.setValue({id:1,pms:"test"})

then its doesn't reflects the value on html page.

here is my html code:

<select formControlName="pms" class="form-control down-arrow">
  <option value="">Select</option>
  <option *ngFor="let item of pmsList">{{item.pms}}</option>
</select>

Upvotes: 0

Views: 6718

Answers (4)

Ricardo
Ricardo

Reputation: 11

Recently using Angular 7 and material I experience the same problem, the solution for me was force return a string to the FormGroup

createCategoryForm(): FormGroup
{
    return this._formBuilder.group({
        id: [this.cat.id],
        name: [this.cat.name],
        type: [this.cat.type],
        parent_id: ["" + this.cat.parent_id]
    });
}

and then, just for testing, I have let fixed 2 options with ids 1 and 2

<div fxLayout="row" fxLayoutAlign="start start">
            <mat-form-field appearance="outline" fxFlex>
                <mat-label>Parent</mat-label>
                <mat-select name="parent_id" formControlName="parent_id">
                    <mat-option value="1">1</mat-option>
                    <mat-option value="2">2</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

Upvotes: 0

RockGuitarist1
RockGuitarist1

Reputation: 716

Make sure you are doing all of this:

import { FormBuilder, FormGroup } from '@angular/forms';

public form: FormGroup;

constructor(private fb: FormBuilder) { 
    this.form = fb.group({
      pms: 'test'
    });
}

<form [formGroup]="form">
    <select formControlName="pms" class="form-control down-arrow">
        <option value="">Select</option>
        <option *ngFor="let item of pmsList">{{item.pms}}</option>
    </select>
</form>

Upvotes: 1

Nadhir Falta
Nadhir Falta

Reputation: 5267

try this:
change myForm with your form's name

this.myForm.get('pms').patchValue({id:1,pms:"test"});

Upvotes: 0

Alexandre Annic
Alexandre Annic

Reputation: 10768

There is seomthing wrong no ? You start with this.pms, then update pms in setValue.

It should be something like that (aussming your form group is called myFormGroup):

this.myFormGroup.setValue({id:1,pms:"test"})

Upvotes: 0

Related Questions