我有以下HTML
<div formArrayName="reservation_and_confirmation" *ngFor="let _reservation_and_confirmation of form.get('reservation_and_confirmation').controls; let i = index;" class="row">
<div class="wrapper">
<h4>
{{ 'reservation_and_confirmation' | translate }} {{ 0 == i ? '' : '-' }} {{ 0 == i ? '' : i }}
</h4>
<a class="add-button pull-right" href="#" (click)="updateMultiInputField('reservation_and_confirmation', i)">
<span aria-hidden="true" class="glyphicon glyphicon-{{0 == i ? 'plus' : 'minus'}}"></span>
</a>
</div>
<div (domChange)="onInputClone('reservation_and_confirmation', i, $event)" class="form-horizontal main-content">
<span [formGroupName]="i">
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'contact_person' | translate }} *</label>
<div class="col-sm-6 form-input">
<input formControlName="name" type="text" class="form-control">
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.name">{{errorMessage.name}}</span>
</ng-container>
</div>
</div>
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'title' | translate }} *</label>
<div class="col-sm-6 form-input">
<select formControlName="title" class="selectpicker" title="{{ 'select' | translate }}" id="venue-type">
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
<option value="dr">Dr.</option>
<option value="prof">Prof.</option>
</select>
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.title">{{errorMessage.title}}</span>
</ng-container>
</div>
</div>
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'position' | translate }} *</label>
<div class="col-sm-6 form-input">
<input formControlName="designation" type="text" class="form-control">
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.designation">{{errorMessage.designation}}</span>
</ng-container>
</div>
</div>
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'work_email' | translate }} *</label>
<div class="col-sm-6 form-input">
<input formControlName="email" type="text" class="form-control">
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.email">{{errorMessage.email}}</span>
</ng-container>
</div>
</div>
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'phone_number' | translate }} *</label>
<div class="col-sm-6 form-input">
<input formControlName="phone_number" type="text" class="form-control phonepicker">
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.phone_number">{{errorMessage.phone_number}}</span>
</ng-container>
</div>
</div>
<div class="form-group main-form-block">
<label for="venue-type" class="col-sm-6 control-label">{{ 'fax_number' | translate }} *</label>
<div class="col-sm-6 form-input">
<input formControlName="fax_number" type="text" class="form-control phonepicker">
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.fax_number">{{errorMessage.fax_number}}</span>
</ng-container>
</div>
</div>
</span>
</div>
</div>
我想在相应的字段中显示错误，如您所见，我正在使用FormArray来循环和克隆元素。
这是我从服务器收到的示例错误消息。
{
"status":"error",
"message":"Please fix the error and resubmit the form.",
"errors":{
"reservation_and_confirmation":[
{
"designation":"This value is required",
"email":"This value is required",
"phone_number":"This value is required",
"fax_number":"This value is required"
},
{
"title":"This value is required",
"designation":"This value is required",
"email":"This value is required",
"phone_number":"This value is required",
"fax_number":"This value is required"
}
],
"special_order_information":[
{
"name":"This value is required",
"title":"This value is required",
"designation":"This value is required",
"email":"This value is required",
"phone_number":"This value is required",
"fax_number":"This value is required"
}
],
"accounting_department_authorised_contact":[
{
"name":"This value is required",
"title":"This value is required",
"designation":"This value is required",
"email":"This value is required",
"phone_number":"This value is required",
"fax_number":"This value is required"
}
]
}
}
我想显示基于Index的错误消息，这是我的操作方式。
<ng-container *ngFor="let errorMessage of errors.reservation_and_confirmation; let _i = index">
<span class="error-msg" *ngIf="_i == i && errorMessage.name">{{errorMessage.name}}</span>
</ng-container>
当错误消息的索引从0开始（索引位于
错误消息被映射到FormArray元素索引），在某些情况下，例如，如果第一个FormArray元素没有错误，则第一个索引为1，在这种情况下，它将引发错误。
如何使用具有正确索引的ngIf显示错误消息。
谢谢。