Typescript 如何以Angular 形式显示验证错误消息

更新了我的答案，使用formControlName，其余的解释保持不变！但是我使用.bind(this, data)来传递*ngFor上使用的数据来初始化复选框，因为数据是动态的，所以我们需要传递原始数据来确保值被选中，以便至少选中一次复选框！

验证器

export function ValidateCheckboxes(data: any, control: AbstractControl) {
  console.log(data, control.value.cb);
  if (
    !data.some(
      (item: any, index: number) => control.value.cb[index][item.id]
    )
  ) {
    return { checkboxSectionValid: true };
  }
  return null;
}

stackblitz demo个

我们可以为复选框使用formArray，这将确保输入在相同的formArray控制下

this.formGroup = this.formBuilder.group({
  cb: this.formBuilder.array([]),
});
const cb: FormArray = this.cbArray;
this.data.forEach((item: any) => {
  cb.push(new FormControl(null));
});

We need a custom 验证器 to check if any of the checkboxes are checked, we use the below code for that

this.formGroup.setValidators(ValidateCheckboxes);

验证器 function

export function ValidateCheckboxes(control: AbstractControl) {
  console.log(control.value.cb);
  if (!control.value.cb.some((item: any) => item)) {
    return { checkboxSectionValid: true };
  }
  return null;
}

在HTML端，我们将所有复选框分组到一个formGroupName下，然后将formArray控件分配给这些复选框.然后我们可以通过在错误消息div上执行*ngIf="formGroup?.errors?.checkboxSectionValid"来判断错误是否存在！

<div formArrayName="cb">
  <label *ngFor="let val of cbArray.controls; let i = index"
    ><input
      type="checkbox"
      name="{{ val.name }}"
      id="{{ val.id }}"
      [formControl]="val"
    />
    {{ data[i].value }}</label
  >
</div>
<div
  style="color: red; padding-top: 0.2rem"
  *ngIf="formGroup?.errors?.checkboxSectionValid"
>
  Atleast select one checkbox
</div>

完整代码

import { Component, OnInit, VERSION } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  FormArray,
  FormControl,
} from '@angular/forms';

export function ValidateCheckboxes(control: AbstractControl) {
  console.log(control.value.cb);
  if (!control.value.cb.some((item: any) => item)) {
    return { checkboxSectionValid: true };
  }
  return null;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.HTML',
})
export class AppComponent implements OnInit {
  formGroup: FormGroup;
  public data = [
    {
      name: 'chk1',
      id: 'chk1',
      value: 'Car',
    },
    {
      name: 'chk2',
      id: 'chk2',
      value: 'Bus',
    },
    {
      name: 'chk3',
      id: 'chk4',
      value: 'Motor',
    },
  ];

  constructor(private readonly formBuilder: FormBuilder) {}

  get cbArray() {
    return this.formGroup.get('cb') as FormArray;
  }

  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      cb: this.formBuilder.array([]),
    });
    const cb: FormArray = this.cbArray;
    this.data.forEach((item: any) => {
      cb.push(new FormControl(null));
    });
    this.formGroup.setValidators(ValidateCheckboxes);
  }
}

HTML

<div style="padding: 1rem">
  <form [formGroup]="formGroup">
    <div formArrayName="cb">
      <label *ngFor="let val of cbArray.controls; let i = index"
        ><input
          type="checkbox"
          name="{{ val.name }}"
          id="{{ val.id }}"
          [formControl]="val"
        />
        {{ data[i].value }}</label
      >
    </div>
    <div
      style="color: red; padding-top: 0.2rem"
      *ngIf="formGroup?.errors?.checkboxSectionValid"
    >
      Atleast select one checkbox
    </div>
    <hr />
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

stackblitz demo