Ошибка отображения из вложенного массива с помощью ngIf

Question

У меня следующий 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"
         }
      ]
   }
}

Я хочу отобразить сообщение об ошибке на основе индекса, вот как я это делаю.

<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 с правильными индексами.

Спасибо.