It looks like maxUsers in the product is number. Try removing the quote of value.

maxUsers = [
    { value: 30, viewValue: '30' },
    { value: 60, viewValue: '60' },
    { value: 90, viewValue: '90' },
    { value: 120, viewValue: '120' },
    { value: 150, viewValue: '150' },
    { value: 180, viewValue: '180' },
    { value: 1200, viewValue: 'Unlimited' }
  ] 

I have the following dropdown in my HTML:

<td colspan="2" width="100%">
    <mat-form-field class="generate-full-width">
    <mat-select placeholder="Product" formControlName="product" name="product" (selectionChange)="getDefaultValues()">
    <mat-option *ngFor="let product of products" [value]="product.value">
                                                    {{product.viewValue}}
    </mat-option>
    </mat-select>
    <mat-error *ngIf="submitted && hasError('product', 'required')">Product is required</mat-error>
    </mat-form-field>
</td>

For each product, I am populating in some fields. Each product has three values associated with it, which I need to show when a product is selected. One of these fields is a drop-down, in HTML like this:

<td colspan="2" width="100%">
    <mat-form-field class="generate-full-width">
    <mat-select placeholder="Max Users" formControlName="maxUsers" name="maxUsers">
    <mat-option *ngFor="let user of maxUsers" [value]="user.value">
                                                {{user.viewValue}}
    </mat-option>
    </mat-select>
    <mat-error *ngIf="submitted && hasError('maxUsers', 'required')">Max Users is required</mat-error>
    </mat-form-field>  
</td>

The getDefaultValues() method in my ts file is this:

let defaultArray = this.getDefaultConfig().filter((item) => {
    return item.id === product;
});
        
this.form.get('maxUsers').setValue(defaultArray[0].maxUsers)
this.form.get('value2').setValue(defaultArray[0].value2);
this.form.get('value3').setValue(defaultArray[0].value3);

The getDefaultConfig() method is:

let defaultProductConfig: any=[];
    this.allProducts.forEach(element => {
      
      defaultProductConfig.push
        ({"id": element["productId"],
        "maxUsers" : element["maxUsers"],
        "value2": element["value2"],
        "value3": element["value3"]});
    });
    
    return defaultProductConfig;
  }

When I select a product, the value2 and value3 are populated. They are text fields. But the maxUsers value is not populated. It has a list of permissible values, and each product will have those values only. They are defined as:

maxUsers = [
    { value: '30', viewValue: '30' },
    { value: '60', viewValue: '60' },
    { value: '90', viewValue: '90' },
    { value: '120', viewValue: '120' },
    { value: '150', viewValue: '150' },
    { value: '180', viewValue: '180' },
    { value: '1200', viewValue: 'Unlimited' }
  ] 

How to populate this field too, according to the product selected?