如何解决更改单选按钮 Angular 11 的文本颜色
所以我有这些单选按钮:
<form [formGroup]="myForm" class="location_filter">
<label style="font-weight: 500; color: #C0C0C0">Select a button: </label>
<mat-radio-group>
<div class="p-field-radiobutton">
<mat-radio-button name="locationType" (click)="clickeEvent()" value="theFirst"
[disabled]="isDisabled" inputId="theFirst" formControlName="locationType" id="myRadioButton" >
</mat-radio-button>
<label for="theFirst" id="1Radio">Radio 1</label>
</div>
<div class="p-field-radiobutton">
<mat-radio-button name="locationType" (click)="clickeEvent()" value="theSecond"
[disabled]="isDisabled" inputId="theSecond" formControlName="locationType" >
</mat-radio-button>
<label for="theSecond" style="color: #C0C0C0">Radio 2</label>
</div>
</mat-radio-group>
</form>
我有 3 个问题:
- 如何在页面加载时默认为第一个收音机?
- 选择特定单选按钮时如何更改文本颜色?
- 我根据条件禁用了按钮,如何禁用附加到它的 clickevent?
我的角度有点弱,所以非常感谢任何帮助或建议。 谢谢
解决方法
如何在页面加载时默认为第一个收音机?
为此,您可以使用checked属性并根据您要选择/取消选择的默认设置为true/false,如下所示 -
<mat-radio-button [checked]="true">Radio button 1</mat-radio-button>
<mat-radio-button [checked]="false">Radio button 2</mat-radio-button>
选择特定单选按钮时如何更改文本颜色?
有多种方法可以做到这一点,例如 ngStyle 和 ngClass。您可以阅读有关它们的信息here。
我根据条件禁用按钮,如何禁用附加到它的clickevent?
您可以使用以下 CSS 属性使单选按钮不可点击。您也可以在禁用单选按钮时使用 ngStyle/ngClass 添加此属性。
pointer-events: none