angular - 使用 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 显示错误消息。

谢谢。

标签： angularangular7angular-ng-if