Angular 材料中的單選按鈕 Forms

Question

我正在嘗試在具有單選按鈕的mat-grid-list中創建一個表單，但是當數據正確連接到我的 formControl 時，由於 label 沒有綁定到材料表單，因此顯示完全混亂。 我希望它看起來像什么：期望的外觀當前的外觀

這是 html，為了便於閱讀，我刪除了額外的輸入。 我嘗試對接<mat-form-field>內的部分，但這完全破壞了表格。

<div class="mat-elevation-z3 search-form">

    <mat-grid-list [cols]="(isHandset$ | async) ? 1 : 3" rowHeight="80px">

        <form [formGroup]="searchForm">

            <mat-grid-tile>
                <mat-form-field>
                    <mat-label>Name</mat-label>
                    <input formControlName="name" id="inputName" matInput title="name" type="text">
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile>
                <mat-label>Builder Group Status</mat-label>
                <mat-radio-group aria-label="Builder Group Status" formControlName="status" id="inputStatus">
                    <mat-radio-button *ngFor="let stat of status" [value]="stat">
                        {{stat}}
                    </mat-radio-button>
                </mat-radio-group>
            </mat-grid-tile>

        </form>

    </mat-grid-list>
</div>

ts 文件，再次刪除了額外的字段以提高可讀性：

status: string[] = ["Suspended", "Active"];

 ngOnInit(): void {
    this.searchForm = new FormGroup({
      name: new FormControl(null, Validators.required),
      status: new FormControl("Active", Validators.required),
    });
  }

Answer 1

嘗試這個：

<mat-grid-tile>
  <div>
    <mat-label>Builder Group Status</mat-label> <br />
    <mat-radio-group aria-label="Builder Group Status" formControlName="status" id="inputStatus">
      <mat-radio-button *ngFor="let stat of status" [value]="stat" style="margin: 10px;">
        {{ stat }}
      </mat-radio-button>
    </mat-radio-group>
  </div>
</mat-grid-tile>