未选择 mat-radio 时禁用按钮

Question

我有一种mat-radio-group形式和一个button ：

<form action="">
    <mat-radio-group aria-label="Select an option">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>
    <button type="submit">Submit</button>
</form>

我想在未选择mat-radio时禁用button

Answer 1

它可能有帮助：

<md-radio-group [(ngModel)]="isSelected">
    <md-radio-button *ngFor="let key of array" [value]="key" (change)="radioChange($event)">
        {{key}}
    </md-radio-button>
</md-radio-group>

在你的 .ts 文件中：

radioChange(event: MdRadioChange) {
    this.isSubmitButtonEnabled = event.value; //It returns a boolean value.
}

检测到单选按钮的值变化后，根据您的要求在按钮上应用这些类。

[class.opacity-50]="!isSubmitButtonEnabled" [disabled]="!isSubmitButtonEnabled"