Как установить изображение для флажка при проверке в угловых 6 - PullRequest
Новая
       8

Как установить изображение для флажка при проверке в угловых 6

0 голосов
/ 30 сентября 2019

Я пытаюсь установить изображение для отмеченных и непроверенных флажков в условии проверки. Проверенный флажок должен быть отмечен изображением. Не установлен флажок должен быть непроверенный изображение. Но не работает. Я использовал угловой метод 6 реактивной формы

1 Ответ

0 голосов
/ 30 сентября 2019

Измените условие Недопустимый элемент управления на: 

<form (ngSubmit)="onSubmit()" novalidate [formGroup]="fg">

      <div class="main" [ngClass]="{'ng-invalid': fg.get('bUnits').at(i).invalid, 'ng-valid': fg.get('bUnits').at(i).valid}" formArrayName="bUnits" *ngFor="let unit of businessUnits; let i = index;">
          <p>Unit {{ i+1 }}</p>

              <input type="checkbox" [formControlName]="i" [value]="unit.value">
              <label> {{unit.name}} </label>

      </div>

      <br>
      <button type="submit">Submit</button>
      <p>You have selected all checkboxes ::: {{ fg.valid }}</p>
</form>


.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;
}

.ng-invalid{
  color:red;
}
.ng-valid{
  color:blue;
}

И проверьте свой класс CSS , когда я изменю его на .control-invalid тогда это работает. Я не знаю много CSS. Надеюсь, это поможет

...