Material 单选按钮内的 Angular Material 表单字段不会触发单选按钮

Question

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

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

简化代码:

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

如何让单选按钮在用户点击字段后被选中？

-编辑-

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

Answer 1

这使用 react 形式。

您可以在 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 中的复选框 - 那是在自找麻烦。