typescript - 如何在 Angular 表单中显示验证错误消息

我正在尝试为 Angular 表单显示验证错误消息。我有三个复选框。如果我没有选择任何一个，我想显示错误消息。如何在 Angular 的响应式表单验证中实现它？

演示: https://stackblitz.com/edit/angular-gitter-ddqhne?file=app%2Fapp.component.html

app.component.html:

    <form [formGroup]="formGroup">
    <label *ngFor="let val of data"><input type="checkbox" name="val.name" id="val.id" formControlName="cb"> {{val.value}}</label>
    <div style="color: red; padding-top: 0.2rem">
        Atleast select one checkbox
    </div>
    <hr>
    <div>
        <button type="submit">Submit</button>
    </div>
    </form>

app.component.ts:

  ngOnInit(): void {
     this.formGroup = this.formBuilder.group({
        cb: [false, Validators.requiredTrue]
     });
  }

答案＃1

我更新了我的答案以使用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 演示

我们可以为复选框使用 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));
});

我们需要一个自定义验证器来检查是否有任何复选框被选中，我们为此使用下面的代码

this.formGroup.setValidators(ValidateCheckboxes);

验证器函数

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 演示

答案＃2

当我尝试你发布的代码时，它可以正常工作，如下所示（注意我将名称从 formGroup 改为 myForm：

app.component.ts

  ngOnInit(): void {
    this.myForm = this.formBuilder.group({
       cb: [false, Validators.requiredTrue]
    });
 }

app.component.html

  <div style="padding: 1rem">
  <form [formGroup]="myForm">
    <label *ngFor="let val of data"
      ><input
        type="checkbox"
        name="val.name"
        id="val.id"
        formControlName="cb"
      />
      {{ val.value }}</label
    >
    <div *ngIf="!myForm?.valid" style="color: red; padding-top: 0.2rem">
      Atleast select one checkbox
    </div>
    <hr />
    <div>
        <button type="submit" [disabled]="!myForm?.valid">Submit</button>
    </div>
  </form>
</div>

当没有选中任何复选框时，提交按钮会被禁用。或者还有其他你无法使其正常工作的地方吗？

*** 编辑添加了 *ngIf="!myForm?.valid" 到错误信息，以便根据复选框是否选中显示或隐藏。你也可以监听表单是否被触摸过以最初隐藏消息，但我把这个留作给你的练习。