Блог

Главная - Вопросы по программированию - Angular: как создать ошибку проверки (переключатели должны быть выделены красным цветом) на переключателях, когда пользователь отправляет пустую форму

Angular: как создать ошибку проверки (переключатели должны быть выделены красным цветом) на переключателях, когда пользователь отправляет пустую форму

#javascript #angular #typescript

#javascript #angular #typescript

Вопрос:

Эта проблема уже опубликована в guthub, но я не вижу там решения. https://github.com/angular/components/issues/11333

Надеялся, что есть какой-либо обходной путь.

https://mat-radio-group-validation.stackblitz.io/

Эта ссылка объяснит ошибку. Когда пользователь отправляет пустую форму, текстовое поле выделяется красным. Но переключатели не выделяются.

Спасибо

Комментарии:

1. Привет, пожалуйста, включите краткое изложение вашего вопроса с примером кода вместо простой ссылки, это поможет людям ответить на ваш вопрос напрямую. Тем более, что проблема с GitHub закрыта.

Ответ №1:

Просто добавьте в свой styles.scss (или в свой styles.css)

 .mat-radio-group.ng-invalid.ng-touched .mat-radio-outer-circle {
    border-color: red;
}
.mat-radio-group.ng-invalid.ng-touched .mat-radio-label-content {
     color: #f44336;
     border-bottom: 2px solid #f44336;
}

Затем в submit отметьте как затронутый

   submit(form: FormGroup) {
    if (form.valid){
       .....
    }
    else 
       this.form.markAllAsTouched();
  }

Вы можете увидеть в этом стекблите

ПРИМЕЧАНИЕ1: необходимо «принудительно» указать группу радиостанций. ПРИМЕЧАНИЕ2: ваш stackblitz не позволяет видеть код

Комментарии:

1. Сработало для меня. нужно только добавить ::ng-deep перед классом CSS