离子复选框未正确检查

Question

我是新手 angular/ionic

我有父复选框，点击它，我想启用所有子复选框，反之亦然

这是我的代码，我已经厌倦了但它不起作用：

home.html

<form [formGroup]="form">
<ion-item>
    <ion-checkbox slot="start" formControlName="AllBulkhead" (ionChange)="checkBoxAllLongiClick($event)">
    </ion-checkbox>
    <ion-label>All longitudinal bulkheads</ion-label>
  </ion-item>
  <div class="subCheckbox">
    <ion-item>
      <ion-checkbox slot="start" formControlName="longiBulkhead" (ionChange)="checkBoxLongiClick($event)">
      </ion-checkbox>
      <ion-label>Longitudinal bulkheads</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" formControlName="outerBulkhead" (ionChange)="checkBoxOuterLongiClick($event)">
      </ion-checkbox>
      <ion-label>Outer longitudinal bulkheads</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" formControlName="innerBulkhead" (ionChange)="checkBoxInnerLongiClick($event)">
      </ion-checkbox>
      <ion-label>Inner longitudinal bulkheads</ion-label>
    </ion-item>
  </div>
</form>

home.ts

constructor(private _fb: FormBuilder){
this.form = this._fb.group({
      AllBulkhead: false,
      longiBulkhead: false,
      outerBulkhead: false,
      innerBulkhead: false,
});
}

checkBoxAllLongiClick(e) {
    if (e.currentTarget.checked) {
      this.form.controls['longiBulkhead'].patchValue(true);
      this.form.controls['outerBulkhead'].patchValue(true);
      this.form.controls['innerBulkhead'].patchValue(true);
    }
    else {
      this.form.controls['longiBulkhead'].patchValue(false);
      this.form.controls['outerBulkhead'].patchValue(false);
      this.form.controls['innerBulkhead'].patchValue(false);
    }
  }

  checkBoxLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxOuterLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxInnerLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxSubLongiClick() {
    if (this.form.get('longiBulkhead').value &&
      this.form.get('outerBulkhead').value &&
      this.form.get('innerBulkhead').value) {
      this.form.controls['AllBulkhead'].patchValue(true);
    } else {
      this.form.controls['AllBulkhead'].patchValue(false);
    }
  }

我想做的是当我点击 AllBulkhead 复选框时，我想 check/uncheck 它的所有 3 个子复选框，即 longiBulkhead,outerBulkhead,innerBulkhead

下面是我的代码在我取消选中 3 个子复选框中的任何一个时出现意外行为，因此它不会取消选中父复选框，即 AllBulkhead 复选框

我哪里弄错了谁能帮帮我吗？ 先谢谢了！

Answer 1

在 HTML 中使用 (click) 而不是 (ionChange)。由于 ionChange 在选中的属性发生更改时发出，因此更改复选框表单值也会触发它们的 ionChange，这是不必要的并且会产生这种意外行为。

Answer 2

(ionChange) 实际上是一个很好的实践。

作为快速解决方案，我会在您每次更改复选框时重建表单。

在 .ts 中：

private AllBulkhead = false;
private ..... [add all your checkbox values here]

constructor(private _fb: FormBuilder){
    this.buildForm();
}

buildForm() {
    this.form = this._fb.group({
          AllBulkhead: this.AllBulkhead,
          longiBulkhead: this.longiBulkhead,
          outerBulkhead: this.outerBulkhead,
          innerBulkhead: this.innerBulkhead,
    });
}

checkboxClickHandler(var, value) {
    // this is called with (ionChange) from html
    // change the value ( this.AllBulkhead = value )
    this.buildForm() // rebuild form with correct values
}

祝你好运！

Answer 3

我认为问题在于更改“全部”选项也会触发其他选项的更改，同时尝试再次更改“全部”选项。这不是很容易注意到，但是如果你添加一些 console.log('...'); 你会发现更新选项状态的方法被调用的次数比你预期的要多。

处理此问题的更好方法是将“全部”选项保留在表单之外。这背后的原因是“全部”选项并不是真正的选项，而是基于其他选项状态的副作用。通过将它留在表单之外，我们可以控制何时以及如何更新它，而不会有任何与选项更改相关的问题在幕后触发另一个选项的更改。

另请注意，从 Ionic 4.1.0 开始，ion-checkbox 组件具有 indeterminate 状态，可能对此类场景有用。这是一种常见的 UI/UX 做法，如果您 select 只是几个选项中的一些（但不是全部）而不是将“全部”选项显示为未选中，它会显示在 不确定的状态。

总之请看这个working Stackblitz demo:

就像您在演示中看到的那样，我将“全部”选项的状态保留在表单之外：

  public form: FormGroup;

  public allOptionStateChecked = false;
  public allOptionStateIndeterminate = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      option1: false,
      option2: false,
      option3: false
    });
  }

我正在使用这些属性手动设置它的状态（也使用 click 处理程序而不是 ionChange）：

<ion-item (click)="onAllChange()" lines="none">
  <ion-checkbox 
    slot="start" 
    [checked]="allOptionStateChecked"
    [indeterminate]="allOptionStateIndeterminate">
  </ion-checkbox>
  <ion-label>All</ion-label>
</ion-item>

我还有一些辅助方法可以告诉我是否选中了全部或部分选项：

  private allChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return option1Value && option2Value && option3Value;
  }

  private someChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return !this.allChecked() && (option1Value || option2Value || option3Value);
  }

所有这些都准备就绪后，只需要做两件事：

当任何其他选项更改时更新“所有”选项状态
单击“全部”选项时更新其余选项。

  public onAllChange(): void {
    const nextValue = this.allChecked() ? false : true;

    this.form.get("option1").patchValue(nextValue);
    this.form.get("option2").patchValue(nextValue);
    this.form.get("option3").patchValue(nextValue);
  }

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();
  }

请注意，我没有在 onAllChange() 方法中更新 allOptionStateChecked 和 allOptionStateIndeterminate。由于“all”选项的状态是基于其他选项状态的副作用，因此它的状态在 onOptionChange() 中更新。

编辑

根据您的意见，我更新了 Stackblitz demo 以将“全部”选项作为表单的一部分，但 与您的代码的不同之处在于，我手动设置“全部”选项的状态，而不是使用 formControlName="all":

之类的方法将其绑定到视图

  ...

  ngOnInit() {
    this.form = this.formBuilder.group({
      all: false, // <-- added this to the form
      option1: false,
      option2: false,
      option3: false
    });
  }

  ...

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();

    // Added this line at the end of the method!
    this.form.get("all").patchValue(this.allOptionStateChecked);
  }

离子复选框未正确检查

ion-checkbox doesn't check properly

ionic-framework

angular

angular-reactive-forms

angular-forms

ion-checkbox

编辑