Angular “材质”单选按钮内的“角度材质窗体”字段不'；t触发单选按钮

当我在

单选按钮

中有

表单字段

时，单击表单字段时不会选中单选按钮。 如果我在单选按钮区域内但在表单字段外单击，则会选中它

当我单击表单字段时，我可以看到单选按钮的动画被选中，但实际上没有被选中

简化代码：

<mat-radio-button>
  <mat-form-field>
    <input matInput>
  </mat-form-field>
</mat-radio-button>

如何在用户单击字段后选择单选按钮

-编辑-

---

mat form字段是必需的。还是有更好的方法让用户单击字段后自动选择单选按钮？
您应该这样尝试：

 <mat-radio-group name="grpName" >
            <mat-radio-button [checked]="true" name="opList1" >Option 1</mat-radio-button>
           <mat-radio-butto name="opList2" >Option 2</mat-radio-button>
           <mat-radio-button name="opList3" >Option 3</mat-radio-button>
 </mat-radio-group>


选择1
选择2
选择3
这使用反应形式。

您只需使用
mat表单字段上的正常
（单击）
事件即可

由于单击事件会传播，因此不会干扰任何内容

<mat-radio-group formControlName="refundType">

   <mat-radio-button [value]="'partial-refund'" fxLayout="row">

        <mat-form-field appearance="standard" 
                        (click)="selectPartialCheckbox()">

             <mat-label>Partial Refund</mat-label>

             <input matInput [placeholder]="'Amount to refund'" 
                    formControlName="amount"/>

        </mat-form-field>

   </mat-radio-button>

   <!-- other items not shown -->

</mat-radio-group>

不要试图选中DOM中的复选框-这是自找麻烦。
我需要表单字段。表单字段是我收到单选按钮拒绝被选中的问题的地方。就像在您的示例中，如果我们将选项1替换为mat表单字段，则在字段上选择时按钮不会自动选择。为什么需要表单字段？您应该能够将被动表单和模板驱动表单直接绑定到mat无线组。mat单选按钮不适用于mat-form-field。为什么需要表格字段？因为UI有时工作得更好。例如，
-全额退款
，然后是
-部分退款[\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu]
，用户只需单击文本框即可。为什么要让事情变得更困难，并隐藏文本框，直到单击收音机？
selectPartialCheckbox()
{
    this.form.controls['refundType'].setValue('partial-refund');
}