Измените цвет границы переключателя на форме отправки в Angular 2

Question

У меня есть требование, чтобы мне пришлось изменить цвет рамки переключателя на красный, когда форма отправляется без какого-либо значения

Я создал настраиваемый элемент управления переключателем с ключевым словом «required»

 <input type="radio" id="test1" name="{{'valee' + i + j}}" [(ngModel)]="entity.test" [value]="true" #dept_multimediatransfer="ngModel" required>
                                Oui
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="radio" id="test2" name="{{'valee' + i + j}}" [(ngModel)]="entity.test" [value]="false" #dept_multimediatransfer="ngModel" required>
                                Non

input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 14px;
    height: 14px;
    padding: 2px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #bbbbbb;
    // background-color: #e7e6e7;
    border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
    background-color: #4A4A4A;
}

css:
 input.ng-invalid.ng-touched:not(.field-control), select.ng-invalid.ng-touched, p-calendar.ng-invalid.ng-touched > span, input.master-invalid:not(.field-control) {
        border: solid 1px red;
    }

работает нормально в chrome, но не работает в IE, может кто-то помочь

Answer 1

Вы можете использовать свойство [ngClass] из Angular, чтобы добавить условный класс, который добавит класс CSS, который придаст тегу красный цвет, или использовать [ngStyle], чтобы задать условный стиль непосредственно в теге.

также, чтобы задать условие, используйте логическую переменную, которая будет иметь значение true, когда вы нажмете кнопку отправки и значения не будут введены.