Почему мой псевдоселектор my: after не отображается, когда я устанавливаю значение в свой флажок FormControl?

Question

Я делаю свой собственный пользовательский флажок в Angular, используя интерфейс ControlValueAccesor, все работало нормально, пока я не попытался манипулировать значением флажка, используя setValue () метода API управления формой, тогда флажок не отображает псевдо-селектор: после, но когда я делаю это вручную, он рендерит его.

Ручной запуск флажка (добавьте атрибут «флажок» и «: после») [Работает как ожидалось]

Значение запуска флажка.setValue (true), метод .setValue (false)

: after не останавливает рендеринг, даже если состояние имеет значение false

Но в другихработает хорошо, и единственное отличие состоит в том, что флажки имеют

ng-untouched ng-pristine ng-valid 

классов

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

ng-valid ng-touched ng-dirty

это код флажка TS: https://gist.github.com/SeniorFlacko/69fe47d92f01e1c481942d808fbdc058 SCSS: https://gist.github.com/SeniorFlacko/abc0c727f08b8a0821cb063cb3356a92

Вот как я добавил: после checkbox.component.scss ``

> .label > .checkmark {
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 1px;
    height: 16px;
    width: 18px;

    &::after {
      position: absolute;
      content: "";
      display: none;
      left: 9px;
      top: -6px;
      width: 6px;
      height: 21px;
      border: solid $white;
      border-width: 0 2px 2px 0;
      transform: rotate(39deg);
    }
  }

``