如何以角度形式显示验证错误消息

Question

我正在尝试显示 Angular for 的验证错误消息。我有三个复选框。如果我没有选择任何人，我想显示错误消息。如何在角度的反应式表单验证中做到这一点。

演示：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]
     });
  }

Answer 1

当我尝试您发布的代码时，我让它工作，如下所示（注意我将名称从 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 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>

当未选中任何复选框时，提交按钮将被禁用。 还是因为其他原因而无法上班？

Answer 2

我们可以使用

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