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

Пользователь

от ludie , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jazmyne , год назад

@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 будет помечен как недействительный и форма не будет отправлена, пока пользователь не выберет вариант.

Пользователь

от fred , 11 дней назад

@ludie 

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


1 2 3 4 5


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