如何在角度6的验证中为复选框设置图像

Question

我正在尝试在验证条件下为选中和未选中的复选框设置图像。但是无法正常工作。我已经使用了角度6反应形式方法。有人可以解决此问题吗？

对于演示：https://stackblitz.com/edit/angular-custom-form-validation-a8jrhz?file=app/app.component.html

app.component.css：

.main.ng-touched.ng-invalid input[type=checkbox]+label::before {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Red_checkbox-unchecked.svg/768px-Red_checkbox-unchecked.svg.png)!important;
    background-repeat: no-repeat!important;
}

.main.ng-touched.ng-valid input[type=checkbox]+label::before {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Red_checkbox-checked.svg/600px-Red_checkbox-checked.svg.png)!important;
    background-repeat: no-repeat!important;
}

Answer 1

只需将[hidden]绑定到图像

<input type="checkbox" [formControlName]="i" [value]="unit.value">
<img src="{link}" [hidden]="!unit.invalid"/>

希望有帮助