Angularmaterial 中的处理mat—radio—button表单值访问器

单选组是mat单选按钮的逻辑分组，所以我们需要将单选组移动到一个单独的表单控件<代码>favourited，这将包含所选的值，然后我们可以渲染单选按钮没有表单控件名称！

工作示例提供代码和stackblitz！

代码

ts

<代码>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatInputModule } from '@angular/material/input';
import { Subscription } from 'rxjs';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.HTML',
  styleUrl: 'radio-ng-model-example.css',
  standalone: true,
  imports: [
    FormsModule,
    CommonModule,
    MatFormFieldModule,
    MatRadioModule,
    MatInputModule,
    ReactiveFormsModule,
  ],
})
export class RadioNgModelExample {
  itemsForm: FormArray = this.fb.array([]);
  myRatesForm = new FormGroup({
    favourited: new FormControl(),
    items: this.itemsForm,
  });
  constructor(private fb: FormBuilder) {}

  myRates: any[] = [];
  subscription$: Subscription = new Subscription();
  favoriteRate: any;

  ngOnInit(): void {
    this.myRates = [
      { name: 'test1', rateValue: 1, isFavorite: true },
      { name: 'test2', rateValue: 2, isFavorite: false },
      { name: 'test3', rateValue: 3, isFavorite: false },
    ];
    this.myRates.map((rate) => {
      this.myRatesForm.controls.items.push(
        this.fb.group({
          name: [rate.name, Validators.required],
          rateValue: [rate.rateValue, Validators.required],
          isFavorite: [rate.isFavorite],
        })
      );
    });
  }
}

HTML

<代码>{{myRatesForm.value | json}}

<form
  *ngIf="myRatesForm.controls.items.controls.length > 0"
  [formGroup]="myRatesForm"
>
  <mat-radio-group formControlName="favourited">
    <div formArrayName="items">
      <div
        [formGroupName]="i"
        *ngFor="let myRate of myRatesForm.controls.items.controls; let i = index"
      >
        <mat-radio-button
          [value]="myRates[i]"
          [checked]="myRates[i].isFavorite"
        ></mat-radio-button>
        <div class="flex">
          <mat-form-field appearance="outline">
            <input formControlName="name" matInput placeholder="Taux" />
          </mat-form-field>
          <div>
            <mat-form-field appearance="outline">
              <input formControlName="rateValue" matInput placeholder="Taux" />
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>
  </mat-radio-group>
</form>

Stackblitz Demo