从单选按钮"角度材质"对话框中获取值

Question

我有一个"角度材质"对话框，我在其中更新表格，点击更改状态。

我需要从对话框中的单选按钮获取值

以下是的完整工作示例

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

这是组件的代码

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();
}
}

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

所以当我点击单选按钮时，我需要得到答案中点击单选按钮的值。

所以状态需要是单选按钮

我怎样才能正确地做到这一点？

Answer 1

当您使用反应形式时，在mat-radio-group上使用formControlName，就像在matInput字段上一样。我已经分叉并更新了您的Stacklitz，现在当您单击保存按钮时，它也会在控制台上记录单选按钮的值。您可以在支付组件中获得并使用此值。

Answer 2

将其添加到TS文件中：

@Input()
name: string

这个在你的HTML文件中：

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