Angular 2 select tag with formControlName not working

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>

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"})

try this:
change myForm with your form's name

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

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>