mat-select don't change placeholder value-CodePudding

Have mat-select, that should change placeholder if user choose one of radio button options

<mat-select
  *ngIf="!data.loading"
  [placeholder]="form.get('dataType')?.value === 'test' ? 'Test-text' : 'Not-test'"
  formControlName="dataId"
>

For some reason, I see that placeholder changes in html code; but this changes does not happened on page itself. Value in mat-select field stays the same. It changes only if I click on mat-select field.

Why is that?

CodePudding user response：

Try this way:

placeholder="{{form.get('dataType')?.value === 'test' ? 'Test-text' : 'Not-test'}}"

CodePudding user response：

It sounds like you want to change the value of the select, and not the placeholder. The placeholder is only displayed before any value is selected. Use [value] to change the value. You can select from the values that you have assigned to mat-options.

Example:

<mat-select [value]="someVar ? 'v1' : 'v2'">
  <mat-option value="v1">Value 1</mat-option>
  <mat-option value="v2">Value 2</mat-option>
</mat-select>

If you want to show the placeholder after a value has been selected, you will need to set the value to undefined or null. You can do that by two way binding [(value)] to a variable, and then assigning that variable in the component.

<mat-select [(value)]="someVar" placeholder="hi">
  ...
</mat-select>

showPlaceholder() {
  this.someVar = undefined;
}