Question

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

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

简化代码：

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

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

-编辑-

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

Answer 1

您应该尝试这样：

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

Answer 2

这使用反应形式。

您只能在(click)上使用普通的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中选中该复选框-这会带来麻烦。

Answer 3

尝试solution：

HTML：

<h1>
    List Of Season</h1>
<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
    <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season.name" [checked]="season.checked">
        {{season.name}}
    </mat-radio-button>
</mat-radio-group>

<div class="alert alert-danger">Your favorite season is: {{favoriteSeason}}</div>

TS：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  favoriteSeason: any = 'Spring'
  seasons: any[] =
 [{name: 'Winter', checked: true},{name:  'Spring',checked: false},{name:  'Summer',checked: false},{name:  'Autumn',checked: false}];
}

以下Angular Material组件旨在在mat-form-field:内工作

<input matInput> & <textarea matInput>

<mat-select>

<mat-chip-list>

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

3 个答案: