Angular: mat-select, reactive form, disable does not show dotted line

Question

When using mat-select with a reactive form, setting it to disabled does not show a dotted line as shown in an example here but a continuous line.

html:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <mat-form-field fxFlex="100%" >
    <mat-select formControlName="tags" placeholder="Select tags" name="tags"></mat-select>
  </mat-form-field>
</form>

component.ts:

myForm: FormGroup;

constructor(
  private fb: FormBuilder,
) {}

ngOnInit() {
  this.myForm = this.fb.group({
    tags: [{value: '', disabled: true},],
  });
}

This also happens when I have this:

this.myForm = this.fb.group({
  tags: ['',],
});

this.myForm.controls.tags.disable();

or this:

myForm: FormGroup;

constructor(
  private fb: FormBuilder,
) {}

ngOnInit() {
  this.myForm = this.fb.group({
    tags: new FormControl({value: '', disabled: true},),
  });
}

or this:

this.myForm = this.fb.group({
  tags: new FormControl('',),
});

this.myForm.get('tags').disable()

I am using Angular 7.2.6

What is the correct way to do this to get the dotted line?

Answer 1

I found the soluction. It was actually because I had the following in the css:

.mat-form-field-underline {
  color: #673ab7 !important;
  background-color: #673ab7 !important;
}

I wanted to be the underline of that color also if the field was not active but that does not seem to work with the disabled fields as a continuous line gets drawn.

So for now, the not ideal solution is to put this in the css:

.mat-form-field-underline {
  color: #673ab7 !important;
}

So the underline is at least in the color I want when the field is active. But I could not find any solution to make it work with the inactive and disabled underline.