Change value of radio button when input field changes

Question

I am having a radio button group with multiple values. One value is a custom value which needs to be set by an field.

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>

When I check the radio "Custom", the correct value is reflected on "timeout" variable. But when I change the input value, "timer_cust" updates, but "timeout" sticks to the old value. How do I update "timeout" which is bound to the "mat-radio-group" as the input value changes?

Are you talking about radio group value ("timeout") change after you type custom value equal to e.g. 1 hour? — Ivan Kashtanov

darkz darkz · Accepted Answer · 2018-08-11T09:37:09

Here timer_cust value changes not visible for timeout. So my suggestion is use the formControl for get matInput value changes.

<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>

Then you can observe value changes by fromcontrol and override that value from timeout variable.

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

Here I attached stackblitz link for you further infomation. https://stackblitz.com/edit/angular-fugo9e?file=styles.css

Change value of radio button when input field changes

1 Answers