Mat-Select dropdown doesn't select on patchvalue

so I load my form with patchvalue, and for some reason the mat-select doesn't select based on the value.

Here is what I have:

 <mat-form-field appearance="fill">
   <mat-select name="serverTypeId" formControlName="serverTypeId">
       <mat-option value="0">None</mat-option>
       <mat-option value="1">Web</mat-option>
        <mat-option value="2">Citrix</mat-option>
    </mat-select>
 </mat-form-field>

In my component I have this:

initServer(zoneId) {
    return new FormGroup({
      id: new FormControl(0),
      zoneId: new FormControl(zoneId),
      serverName: new FormControl('New Server', [Validators.required]),
      serverTypeId: new FormControl(0, [Validators.required]),
    });
  }
addServer(j, id) {
    const fg = <FormArray>this.region.get('zones');
    if (fg) {
      var serverfg = <FormArray>fg.controls[j].get('servers');
      if (serverfg) {
        serverfg.push(this.initServer(id));
      }
    }
  }

and

_.each(r.zones, function (zone, i) {
            self.addZone();
            let zoneFG = self.getZones(self.region)[i];
            if (zoneFG) {
              zoneFG.patchValue(zone);
              _.each(zone.servers, function (server, y) {
                self.addServer(y, server.zoneId);
                let serverFG = self.getServers(zoneFG)[y];
                if (serverFG) {
                  serverFG.patchValue(server);
                }
              });
            }
          });

here is the model:

export interface ServerInfo {
  id: number;
  serverTypeId: number;
  zoneId: number;
  serverName: string;
}

Everything binds properly except the serverTypeId. What am I am missing here?

I think that the value field in each Mat-Option in your template is being interpreted as a string. if you enclose the value attribute in square brackets like this :

[value] = "0" 

it should work