Question

我有一个带有多个值的单选按钮组。一个值是需要由一个字段设置的自定义值。

HTML：

<mat-radio-group [(ngModel)]="timeout">
 <mat-radio-button value="1">1 hour</mat-radio-button>
 <mat-radio-button value="6">6 hours</mat-radio-button>
 <mat-radio-button value="{{timer_cust}}">Custom</mat-radio-button>
</mat-radio-group>

<mat-form-field>
 <input matInput type="number" placeholder="min" [(ngModel)]="timer_cust">
</mat-form-field>

当我检查单选按钮“自定义”时，正确的值会反映在“超时”变量上。但是，当我更改输入值时，“ timer_cust”会更新，但“超时”会保留旧值。当输入值更改时，如何更新绑定到“ mat-radio-group”的“ timeout”？

Answer 1

此处timer_cust的值更改对于超时不可见。因此，我的建议是使用formControl来更改matInput的值。

<mat-radio-group [(ngModel)]="timeout">
    <mat-radio-button value="1">1 hour</mat-radio-button>
    <mat-radio-button value="6">6 hours</mat-radio-button>
    <mat-radio-button [checked]="isChecked" [value]="formControl.value">Custom</mat-radio-button>

    <mat-form-field>
        <input matInput type="number" placeholder="min" [formControl]="formControl">
    </mat-form-field>
</mat-radio-group>

然后，您可以观察fromcontrol值的变化，并从timeout变量中覆盖该值。

this.formControl.valueChanges.subscribe((value) => {
      if (value) {
        this.timeout = value;
        this.isChecked = true; // for auto select custom ratio option when changing input value
      }
    });

在此附上 stackblitz 链接，以供您进一步了解。 {{3}}

输入字段更改时更改单选按钮的值

1 个答案: