带有布尔输入的自定义表单控件不起作用

Question

我正在尝试实现自定义表单控件，它将输入作为布尔值，但是当我输入“false”时它会卡住，它给我带来了疯狂的结果，这是我的代码

切换.component.ts

export class ToggleCheckboxComponent implements ControlValueAccessor {
  private _checked = false;
  public get checked(): boolean {
    return !!this._checked;
  }

  @Input() public disabled: boolean;
  @Input()
  public set checked(val: boolean) {
    if (val !== this._checked) {
      this._checked = val;
      this.onChange(val);
      this.onTouched();
    }
  }
  
  private onChange: any = () => {};
  private onTouched: any = () => {};

  public registerOnChange(fn) {
    this.onChange = fn;
  }

  public registerOnTouched(fn) {
    this.onTouched = fn;
  }

  public writeValue(value: boolean) {
    console.log(value);
    this.checked = value;
  }

  public setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  public toggle() {
    this.checked = !this.checked;
  }
}

toggle.component.html

<label class="c-switch" [ngClass]="{ 'toggle-disabled': disabled }">
  <input type="checkbox" [value]="true" [checked]="checked" [disabled]="disabled" (click)="toggle()" />
  <input
    type="checkbox"
    [value]="false"
    [checked]="checked"
    [disabled]="disabled"
    (click)="toggle()"
    *ngIf="!checked" />
  <span class="c-switch-handle"></span>
  <label class="c-switch-label">
    <ng-content></ng-content>
  </label>
</label>

这是我在另一个组件上使用它

<app-toggle-checkbox [(ngModel)]="isEnabled"
    (ngModelChange)="setSomeConditions($event)">   Example </app-toggle-checkbox>

有任何帮助吗？

Answer 1

请使用下面的示例作为参考，我想一个输入元素就足以获得此功能

html

<label class="c-switch" [ngClass]="{ 'toggle-disabled': disabled }">
  <input
    type="checkbox"
    [value]="checked"
    [checked]="checked"
    [disabled]="disabled"
    (click)="toggle()"
  />
  <span class="c-switch-handle"></span>
  <label class="c-switch-label">
    <ng-content></ng-content>
  </label>
</label>

ts

import { Component, OnInit, forwardRef, Input } from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html',
  styleUrls: ['./custom-checkbox.component.scss'],

  // Step 1: copy paste this providers property
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomCheckboxComponent),
      multi: true,
    },
  ],
})
// Step 2: Add "implements ControlValueAccessor"
export class CustomCheckboxComponent implements ControlValueAccessor, OnInit {
  private _checked = false;
  public get checked(): boolean {
    return !!this._checked;
  }

  ngOnInit() {}

  @Input() public disabled: boolean;
  @Input()
  public set checked(val: boolean) {
    if (val !== this._checked) {
      this._checked = val;
      this.onChange(val);
      this.onTouched();
    }
  }

  private onChange: any = () => {};
  private onTouched: any = () => {};

  public registerOnChange(fn) {
    this.onChange = fn;
  }

  public registerOnTouched(fn) {
    this.onTouched = fn;
  }

  public writeValue(value: boolean) {
    console.log(value);
    this.checked = value;
  }

  public setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  public toggle() {
    this.checked = !this.checked;
  }
}

堆栈闪电战