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
– Ivan Kashtanov, Commented Aug 11, 2018 at 9:23

darkz · Accepted Answer · 2018-08-11 09:53:45Z

1

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

edited Aug 11, 2018 at 9:53

answered Aug 11, 2018 at 9:37

darkz

6106 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

semantic_c0d3r Over a year ago

that's working fine. how do I modify if there are multiple input fields? do I need to create a formControl for each input field?

Collectives™ on Stack Overflow

Change value of radio button when input field changes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related