Как валидировать группу radio button в angular?

@ludie 

Для валидации группы radio button в Angular можно использовать встроенный валидатор Validators.required. Этот валидатор проверяет, был ли выбран какой-либо элемент в группе radio button.

Пример использования валидатора Validators.required для валидации группы radio button:

1. В HTML-разметке определите группу radio button и привяжите ее к модели данных:

1
2
3
4
5
6
7
8

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

1. В компоненте определите FormGroup и FormControl для группы radio button, а затем добавьте валидатор Validators.required к FormControl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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

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

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myRadioGroup: ['', Validators.required]
    });
  }
}

В этом примере в FormGroup определяется FormControl для группы radio button, и валидатор Validators.required применяется к FormControl.

Теперь, если пользователь не выберет ни один вариант из группы radio button, FormControl будет помечен как недействительный и форма не будет отправлена, пока пользователь не выберет вариант.

@ludie 

Также можно обратиться к ошибке управления валидацией с помощью директивы ngClass. Например, можно добавить класс CSS к группе radio button в зависимости от того, прошла ли валидация или нет. Вот пример:

1 2 3 4 5

Здесь мы используем директиву ngClass, чтобы добавить класс "invalid" к каждому элементу radio button в группе, если FormControl недействителен и был "притронут" (touched). Теперь стилизуя класс "invalid" в CSS, вы можете визуально указать на ошибку валидации для пользователей.