Get values of files between two components in Angular

I have a tab in my html that has 5 photos to be uploaded by the user. Do i need to have 5 form control names one for each or how to go with that?

<tab heading="Photos">
    <strong style="color: red;">Upload the main image (Required)</strong>
    <div class="form-group col-12 photo-control">
        <button class="mt-5" type="submit"><strong>Upload Main Image</strong></button><br/>
    <div class="error-block" *ngIf="PA.invalid && (nextClicked || PA.touched)">
        <strong> upload the main image as minimum requirment!</strong>
    </div>
    </div>   
    <strong style="color: green;">Upload secondary images (Optional)</strong>                 
    <div class="form-group col-12 photo-control">
    <button class="mt-5" type="submit"><strong>Upload Image1</strong></button><br/>
    </div>                 
    <div class="form-group col-12 photo-control">
    <button class="mt-5" type="submit"><strong>Upload Image2</strong></button><br/>
    </div>                
    <div class="form-group col-12 photo-control">
    <button class="mt-5" type="submit"><strong>Upload Image3</strong></button><br/>
    </div>                 
    <div class="form-group col-12 photo-control">
    <button class="mt-5" type="submit"><strong>Upload Image4</strong></button><br/>
    </div>
    <br/>
    <div class="form-group col-12">
    <button type="button" class="btn btn-primary col-12"(click)="selectTab(3, true)">Back</button>
    <button type="submit" class="btn btn-primary col-12">Save</button>
    <button type="reset" class="btn btn-danger col-12">Cancel</button>
    </div>
</tab>