在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

您可以使用 Angular 中的 [ngClass] 属性添加一个条件类，该类将添加一个 CSS 类，该类将为标签赋予红色，或者使用 [ngStyle] 直接在标签中赋予条件样式。

此外，要给出条件，请使用布尔变量，一旦您单击提交按钮并且不输入值，该变量将设置为 true。