从单选按钮 Angular Material Dialog 获取值答案

【问题标题】：Get value from radio button Angular Material Dialog从单选按钮 Angular Material Dialog 获取值
【发布时间】：2019-05-11 09:15:15
【问题描述】：

我有 Angular Material 对话框，我在其中更新表格点击更改状态。

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

这是完整的工作示例

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>

因此，当我单击单选按钮时，我需要在答案中获取单击的单选按钮的值。

所以状态需要是单选按钮

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

【问题讨论】：

为什么没有将单选按钮分配给表单控件？
我是 Angular 的新手，所以不知道如何正确操作。 @cale_b
我的观点是：保持一致？您已经为您的付款原因输入分配了它，您还需要为您的无线电输入分配它。表单的角度并不简单，但网络上有大量示例/文档。

标签： javascript angular typescript angular-material

【解决方案1】：

试试这个；

@输入() 名称：字符串 <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>

【讨论】：

【解决方案2】：

当您使用响应式表单时，请在 mat-radio-group 上使用 formControlName，就像在 matInput 字段上一样。我已经分叉并更新了您的Stackblitz，它现在在您单击保存按钮时也会在控制台上记录单选按钮的值。您可以在付款组件中的任何位置获取和使用此值。

【讨论】：

感谢您的帮助。就是这样！