Question

将mat-select与反应形式一起使用时，将其设置为Disabled不会显示如示例here中所示的虚线，而是实线。

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.myForm = this.fb.group({
  tags: ['',],
});

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

或者这个：

myForm: FormGroup;

constructor(
  private fb: FormBuilder,
) {}

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

或者这个：

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

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

我正在使用Angular 7.2.6

获取虚线的正确方法是什么？

Answer 1

尝试

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

Answer 2

我找到了解决方案。实际上是因为我在CSS中具有以下内容：

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

如果该字段未处于活动状态，但我想成为该颜色的下划线，但是随着绘制一条连续线，该字段似乎无法与禁用的字段一起使用。

因此，目前，不理想的解决方案是将其放入CSS：

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

因此，该字段处于活动状态时，下划线至少是我想要的颜色。但是我找不到任何解决方案来使它与不活动和禁用的下划线一起使用。

Answer 3

这适用于 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>

角度：垫选择，反应形式，禁用不显示虚线

3 个答案: