可重用FormControl仅在父组件中的一个实例上显示验证错误

Question

                    <div class="col-md-4">
                        <kt-file-select
                            label="CNIC Front Picture"
                            fcName="cnicFrontPictureData"
                            [fg]="fg"
                            [isRequired]="true"
                            accept="image/*"
                            [fileModel]="customer?.cnicBackPicture"
                        ></kt-file-select>
                    </div>
                    <div class="col-md-4">
                        <kt-file-select
                            label="CNIC Back Picture"
                            fcName="cnicBackPictureData"
                            [fg]="fg"
                            [isRequired]="true"
                            accept="image/*"
                            [fileModel]="customer?.cnicFrontPicture"
                        ></kt-file-select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <kt-file-select
                            label="Customer Picture"
                            fcName="customerPictureData"
                            [fg]="fg"
                            [isRequired]="false"
                            accept="image/*"
                            [fileModel]="customer?.customerPicture"
                        ></kt-file-select>
                    </div>
                 </div>

问题奇怪的是，验证错误仅针对最后一个控件customerPictureData显示，对于上述两个控件，如果输入字段未将边框颜色更改为红色，则看不到错误。

我尝试了什么我试图更改这些控件在标记中的顺序。我尝试在构建反应式表单时更改这些字段的顺序。

file-select.component.html

<ng-container [formGroup]="fg">
    <mat-form-field appearance="outline">
        <mat-label>{{ label }}</mat-label>
        <ngx-mat-file-input
            #removableInput1
            [formControlName]="fcName"
            [placeholder]="label"
            [accept]="accept"
            [required]="isRequired"
        ></ngx-mat-file-input>
        <mat-hint *ngIf="fileModel"
            ><a
                href="javascript:void(0);"
                (click)="openImageInNewTab(fileModel.fileData)"
                >View Image</a
            ></mat-hint
        >
        <button
            mat-icon-button
            matSuffix
            *ngIf="!removableInput1.empty"
            (click)="removableInput1.clear($event)"
        >
            <mat-icon>clear</mat-icon>
        </button>
        <mat-error *ngIf="isControlHasError(fcName, 'required')">
            <strong>{{ "AUTH.VALIDATION.REQUIRED_FIELD" | translate }}</strong>
        </mat-error>
        <mat-error *ngIf="isControlHasError(fcName, 'maxContentSize')">
            The total size must not exceed
            {{ maxFileSize | byteFormat }}.
        </mat-error>
    </mat-form-field>
</ng-container>

file-select.component.ts

    @Input() maxFileSize = 2097152;
    @Input() label = "Select File";
    @Input() fcName;
    @Input() fg: FormGroup;
    @Input() isRequired = false;
    @Input() accept = "image/*";
    @Input() fileModel;
    constructor() {}

    ngOnInit() {
        this.setValidator();
    this.setBase64Converter();
  }

    setBase64Converter() {
        const fc = this.fg.get(this.fcName);

        fc.valueChanges.subscribe(async (val) => {
            if (val && typeof val !== "string" && !val.base64) {
                const base64 = await toBase64(val.files[0]);
                val.base64 = base64;
                this.fg.get(this.fcName).setValue(val);
            }
        });
    }

    setValidator() {
        console.log('this.fcName', this.fcName);
        this.fg
            .get(this.fcName)
            .setValidators([FileValidator.maxContentSize(this.maxFileSize)]);
    }

    openImageInNewTab(imageSrc) {
        const newTab = window.open();
        newTab.document.body.innerHTML = `<img src="${imageSrc}"/>`;
    }

    isControlHasError(controlName: string, validationType: string): boolean {
        const control = this.fg.controls[controlName];
        if (!control) {
            return false;
        }
        const result =
            control.hasError(validationType) &&
            (control.dirty || control.touched);
        return result;
    }