Html 拾取文件的离子/角度形式验证

Html 拾取文件的离子/角度形式验证,html,css,angular,ionic-framework,Html,Css,Angular,Ionic Framework,我正在研究离子/角度应用程序。我的要求是从设备文件管理器中提取文件,并在提交后上传到服务器。我使用ionic cordova中的“拾取文件”功能实现了这一点 但是我在向这个文件添加验证器时遇到了一个问题。即使不添加文件并单击“提交”也可以。我想为这个添加必填字段,就像我为主题行添加的一样 下面是我的代码 HTML文件: <form [formGroup]="sendDocsForm"> <ion-item> <ion-label>Subj

我正在研究离子/角度应用程序。我的要求是从设备文件管理器中提取文件,并在提交后上传到服务器。我使用ionic cordova中的“拾取文件”功能实现了这一点

但是我在向这个文件添加验证器时遇到了一个问题。即使不添加文件并单击“提交”也可以。我想为这个添加必填字段,就像我为主题行添加的一样

下面是我的代码

HTML文件:

<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>
我想将add文件的p标记中的{item.name}作为必填字段,但我不知道如何做到这一点。请告诉我怎么做


谢谢。

有谁能帮我一下吗,我从过去15天就被这个问题困扰了。请使用
Submit Files
并将其禁用,直到用户选择一个文件。你能将
html
ts
文件完全添加到这里吗?添加一个动态表单控件
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);
  });
});
}