Angular:当用户提交空表单时，如何在单选按钮上创建验证错误(单选按钮应以红色突出显示)

<form #myForm="ngForm">
  <label>
    <input type="radio" name="option" value="option1" [(ngModel)]="selectedOption" required>
    Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option2" [(ngModel)]="selectedOption" required>
    Option 2
  </label>
  <label>
    <input type="radio" name="option" value="option3" [(ngModel)]="selectedOption" required>
    Option 3
  </label>
  <button type="submit">Submit</button>
</form>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  selectedOption: string;

  onSubmit() {
    if (!this.selectedOption) {
      // 用户未选择选项，可以在此处处理验证错误
      // 例如，可以将单选按钮的样式设置为红色突出显示
    } else {
      // 用户选择了一个选项，可以在此处处理表单提交逻辑
    }
  }
}

onSubmit() {
  if (!this.selectedOption) {
    // 用户未选择选项，可以在此处处理验证错误
    // 例如，可以将单选按钮的样式设置为红色突出显示
    const radioButtons = document.querySelectorAll('input[type="radio"]');
    radioButtons.forEach((radioButton: HTMLInputElement) => {
      radioButton.classList.add('error');
    });
  } else {
    // 用户选择了一个选项，可以在此处处理表单提交逻辑
  }
}

.error {
  border-color: red;
  /* 其他样式设置，以突出显示错误的单选按钮 */
}