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?
Try This
ngOnInit() {
this.myForm = this.fb.group({
tags: first: new FormControl({value: value, disabled: true},)
});
}
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.
This works on Angular 8:
tags: this.fb.group({ id: this.fb.control({value: '', disabled: true}), name: this.fb.control(''), label: this.fb.control('') })
<mat-form-field appearance="outline" formGroupName="tags"> <mat-label>Tag</mat-label> <mat-select formControlName="id"> <mat-option *ngFor="let tag of tags" [value]="tag.id"> {{tag.label}} </mat-option> </mat-select> </mat-form-field>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.