Angular单选按钮表单验证

<form [formGroup]="myForm">
  <label>
    <input type="radio" formControlName="option" value="option1"> Option 1
  </label>
  <label>
    <input type="radio" formControlName="option" value="option2"> Option 2
  </label>
  <label>
    <input type="radio" formControlName="option" value="option3"> Option 3
  </label>
</form>

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      option: ['', Validators.required]
    });
  }
}

<form [formGroup]="myForm">
  <!-- 单选按钮组 -->
  <label>
    <input type="radio" formControlName="option" value="option1"> Option 1
  </label>
  <label>
    <input type="radio" formControlName="option" value="option2"> Option 2
  </label>
  <label>
    <input type="radio" formControlName="option" value="option3"> Option 3
  </label>

  <!-- 错误消息 -->
  <div *ngIf="myForm.get('option').invalid && myForm.get('option').touched">
    Please select an option.
  </div>
</form>