Ionic / angular form validation for pick file - html

Question

I am working on an ionic/angular application. My requirement is to pickup files from the device file manager and upload to server after submitting. I did this using the pick file functionality in ionic cordova.
But I'm getting a problem in adding validators to this pickfile. Even without adding files and clicking submit its taking. I want to add required field for this as I added for the subject line.
Below is my code.
HTML file:
<form [formGroup]="sendDocsForm">
<ion-item>
<ion-label>Subject: </ion-label>
<ion-input type="text" formControlName="subject" required></ion-input>
</ion-item>
<div class="error-messages">
<ion-label
*ngIf="sendDocsForm.get('subject').hasError('required') && (signupMobile.get('subject').dirty || signupMobile.get('subject').touched)"
color="danger">
Enter Subject line</ion-label>
</div>
<ion-item>
<div (click)="pickFile()">
<ion-icon name="add"></ion-icon>
<p style="margin:0px;">Add Files</p>
</div>
</div>
<div class="class-addfiles">
<div *ngFor="let item of docPaths; let i=index">
<p (click)="editDocRules(item)">{{ item.name }} </p>
</div>
</div>
Submit
.TS file:
this.sendDocsForm = this.fb.group({
subject: new FormControl ('', Validators.compose([ Validators.required])),
});
pickFile() {
const filter = { mime: 'application/pdf' };
this.fileChooser.open().then(fileuri => {
this.filePath.resolveNativePath(fileuri).then(resolvednativepath => {
console.log(resolvednativepath);
this.returnPath = resolvednativepath;
this.fileName = resolvednativepath.substring(
resolvednativepath.lastIndexOf('/') + 1
);
this.fileType = this.fileName.substring(
this.fileName.lastIndexOf('.') + 1
);
const docPath: ItemDoc = new ItemDoc(
Date.now(),
this.fileName,
this.returnPath
);
this.docPaths.push(docPath);
});
});
}
I want to make the {{item.name}} in the p Tag of the add file as a required field but I don't understand how to do this. Please let me know how I can do this.
Thank you.