材料单选按钮内的角度材料表单字段不会触发单选按钮答案

【问题标题】：Angular material form field inside material radio button doesn't trigger radio button材料单选按钮内的角度材料表单字段不会触发单选按钮
【发布时间】：2021-11-16 14:00:15
【问题描述】：

当我在radio button 中有一个form field 时，单击表单字段时不会选择单选按钮。如果我在单选按钮区域内但在表单域之外单击，它确实会被选中。

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

简化代码：

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

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

-编辑-

mat-form-field 是强制性的。或者有没有更好的方法让用户点击该字段后自动选择单选按钮？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这使用反应形式。

您可以在mat-form-field 上使用普通的(click) 事件。

因为点击事件会传播，所以不会干扰任何事情。

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

然而，你实际设置的值取决于你的编码标准是怎样的，但像这样：

selectPartialCheckbox()
{
    this.form.controls['refundType'].setValue('partial-refund');
}

不要尝试检查 DOM 中的复选框 - 这是自找麻烦。

【讨论】：

【解决方案2】：

你应该这样尝试：

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

【讨论】：

我需要表单域。表单字段是我遇到拒绝选择单选按钮的问题的地方。就像在您的示例中一样，如果我们用 mat-form-field 替换选项 1，则在字段上选择时按钮不会自动选择。
为什么需要表单域？您应该能够将反应式和模板驱动的表单直接绑定到 mat-radio-group。 mat-radio-button 不适合与 mat-form-field 一起使用。
为什么需要表单域？因为 UI 有时效果更好。例如。 - Full Refund 后跟 - Partial Refund [_____]，用户希望只需单击文本框。为什么要让事情变得更加困难并隐藏文本框，直到点击收音机？