以 angular 反应形式在动态生成的复选框中显示所需的验证消息

Question

我在版本 13 中创建了一个 angular 项目。我按照 link (https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular) 创建了一个带有动态生成的复选框的表单。该复选框工作正常。动态生成的复选框需要验证。现在我想显示所需的验证消息。这是我的代码：

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of ordersFormArray.controls; let i = index">
    <input type="checkbox" [formControlName]="i" />
    {{ordersData[i].name}}
  </label>

  <span *ngIf="ordersFormArray.errors?.required"> At least one order must be selected </span>

  <br />
  <button type="submit">submit</button>
</form>

但我收到以下错误：

Property 'required' comes from an index signature, so it must be accessed with ['required']. <span *ngIf="ordersFormArray.errors?.required">

Answer 1

改成这样： *ngIf="ordersFormArray.errors?.['required']" 这是 Angular13 中的正确方法。

Answer 2

如果您查看错误，它说属性来自索引签名，必须使用 ['required'] 访问。这实际上就是解决方案。自 v13 以来，许多错误也变得有意义，而且这是现在访问它的正确方法。我在下面展示了新旧方式。

所以实际上这就是需要解决的问题。

老办法

<div *ngIf="ordersFormArray.errors?.required"> At least one order must be selected</div>

新方式

<div *ngIf="ordersFormArray.errors?.['required']">At least one order must be selected</div>

以 angular 反应形式在动态生成的复选框中显示所需的验证消息

Showing required validation message in dynamically generated checkbox in angular reactive form

angular

angular-validation