Get value from radio button Angular Material Dialog

Question

I have Angular Material dialog , where I updating table clicking change status.

I need to get value from radio button in my dialog

Here is full working example

https://stackblitz.com/edit/angular-w9rbj1

Here is code of component

   import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, MatDialog} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import { Payment } from '../payments/payment';


@Component({
    selector: 'editing-dialog',
    templateUrl: './editing-dialog.component.html',
    styleUrls: ['./editing-dialog.component.scss']
})
export class EditingDialogComponent implements OnInit {
    form: FormGroup;
    reason:String;
    id: Number;
    statusdescription: String ;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<EditingDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data:Payment) {
            this.reason = data.Reason;
            this.id  = data.Id;
            this.statusdescription = data.StatusDescription;
            this.form = fb.group({
                reason: [this.reason, Validators.required],
                id: this.id,
                status: this.statusdescription
            });
    }

    ngOnInit() {

    }
    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

And here is it's html

<h2>{{description}}</h2>

<mat-dialog-content [formGroup]="form">

    <mat-form-field>

        <input matInput min="0" max="100" required placeholder="Payment Reason" formControlName="reason" value="{{reason}}">

    </mat-form-field>
    <mat-radio-group>
        <mat-radio-button value="Approve">Approve</mat-radio-button>
        <mat-radio-button value="Reject">Reject</mat-radio-button>
      </mat-radio-group> </mat-dialog-content>

<mat-dialog-actions>

    <button class="mat-raised-button" (click)="save()">
        Ok
    </button>



    <button class="mat-raised-button"
            (click)="close()">
        Close
    </button>

</mat-dialog-actions>

So when I click radio button I need to get the value of clicked radio button in answer.

So status needs to be radio button

How I can do this correctly?

Answer 1

As you are using reactive forms, use formControlName on mat-radio-group just like you did on matInput field. I have forked and updated your Stackblitz which now logs the radio button value on the console as well when you click save button. You can get and use this value where you want in you payments component.

Answer 2

Add this in your TS file:

@Input()
name: string

And this in your HTML file:

<mat-radio-group name="status" ngModel #status="ngModel">
   <mat-radio-button value="Approve">Approve</mat-radio-button>
   <mat-radio-button value="Reject">Reject</mat-radio-button>
</mat-radio-group>