Не снимать флажок angular

Question

Используя angular 9 и некоторый пользовательский ввод, я сделал следующее =>

https://stackblitz.com/edit/angular-ivy-rgsatp

Я хотел бы запретить пользователю отключать переключатель который в настоящее время проверяется, поэтому я изменил следующее в radio-button.component

с

<label [class]="'radio-container ' + cssClass || ''">
  <div class="radio">
    {{ checked }}
    <input type="checkbox" [checked]="checked" [(ngModel)]="checked" (click)="click()" />
    <span class="checkmark"></span>
  </div>

  <div style="margin-left: 20px;">
    <ng-content></ng-content>
  </div>
</label>

Я удаляю привязку ngModel для выполнения [ngModel]="checked" и принудительно устанавливаю состояние на входе.

https://stackblitz.com/edit/angular-ivy-x2sszw

Проблема, с которой я сталкиваюсь, я, хотя проверка остается верной, css нет, и я не понимаю, почему это не принудительно проверять .

Answer 1

Отметьте и снимите отметку - это события браузера, возможно, вам следует использовать event.preventDefault(), чтобы остановить поведение браузера по умолчанию

Like

<input type="checkbox" [checked]="checked" [ngModel]="checked" (click)="click($event)" />

и

click(event): void {
  if (this.checked) {
    event.preventDefault();
  }
  if (!this.disabled) {
    this.checked = true
    this.emitChange()
  }
}

Stackblitz

https://stackblitz.com/edit/angular-ivy-pomkvy

Также я хотел бы добавить еще две точки

1. Не добавляйте ненужные переменные, как в вашем примере this.disabled. Потому что Angular запускает свой цикл при каждом событии. Так что это может повлиять на производительность.
2. Используйте радио вместо флажка, чтобы было проще

Answer 2

Попробуйте вот так

<label [class]="'radio-container ' + cssClass || ''">
  <div class="radio">
    {{ checked }}
    <input type="checkbox" [checked]="checked" [ngModel]="checked" (click)="click()" [attr.disabled]="checked ? true : null" />
    <span class="checkmark"></span>
  </div>

  <div style="margin-left: 20px;">
    <ng-content></ng-content>
  </div>
</label>