Пользовательский интерфейс Angular Material – Как добавить проверку onBlur для флажков/переключателей?

Ответ на ваш вопрос — использовать собственный CSS для создания красной рамки. CSS будет выглядеть, как показано ниже.

.mat-mdc-radio-group.ng-touched.ng-invalid {
  .mdc-radio__outer-circle {
    border-color: red !important;
  }
  .mdc-label {
    color: red;
  }
}

.mat-mdc-checkbox.ng-touched.ng-invalid {
  .mdc-checkbox__background {
    border-color: red !important;
  }
  .mdc-label {
    color: red !important;
  }
}

Основная проблема в вашем подходе связана с флажками, красную проверку невозможно разместить, если только вы не хотите, чтобы пользователь обязательно проверял флажок. В остальном это можно легко сделать для радиогруппы, без поля формы мата.

Полный код:

HTML:

<form [formGroup] = "form" (ngSubmit) = "form.markAllAsTouched();">
  <mat-label>Enter your Selection</mat-label>
  <br />
  <mat-radio-group aria-label = "Select an option" formControlName = "radios">
    @for (item of radioValues; track item){
    <mat-radio-button [value] = "item.id">{{item.label}}</mat-radio-button>
    }
  </mat-radio-group>
  <br />
  @if (form.get('radios'); as radio) { @if (radio?.touched &&
  radio?.errors?.required) {
  <mat-error>Selection is required</mat-error>
  } }
  <hr />
  <mat-label>Enter your Checkboxes</mat-label>
  @for (item of checkboxValues; track item){
  <mat-checkbox [value] = "item.key" [formControlName] = "item.value">
    {{item.value}}
  </mat-checkbox>
  }
  <hr />
  <br />
  <button type = "submit">submit</button>
</form>

ТС:

import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { MatRadioModule } from '@angular/material/radio';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';

/**
 * @title Basic radios
 */
@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrl: 'radio-overview-example.css',
  standalone: true,
  imports: [
    MatRadioModule,
    ReactiveFormsModule,
    MatCheckboxModule,
    CommonModule,
    MatFormFieldModule,
  ],
})
export class RadioOverviewExample {
  radioValues = [
    { id: 1, label: 'apple' },
    { id: 2, label: 'banana' },
  ];
  checkboxValues = [
    { key: 'apple', value: 'apple', selected: false },
    { key: 'banana', value: 'banana', selected: false },
    { key: 'orange', value: 'orange', selected: false },
  ];
  form = new FormGroup({
    radios: new FormControl(null, Validators.required),
  });

  ngOnInit() {
    this.checkboxValues.forEach((item: any) => {
      this.form.addControl(
        item.value,
        new FormControl(null, Validators.required)
      );
    });
    // this.form.get('radios')!.markAsTouched();
    // this.form.get('radios')!.markAsDirty();
  }
}

Нажмите «Отправить», чтобы увидеть ошибки.

Демо-версия Stackblitz