Question

我正在尝试验证以下表格。但没有出现所需的验证消息。但是我的其他文本框验证效果很好。这在输入type =“ file”中。我如何将其验证为必填字段。请检查以下样本。

<form name="form" #f="ngForm" novalidate (ngSubmit)="f.form.valid && save();">
    <div class="form-group col-md-6 pt-3">
        <label>Upload CV</label>
        <input type="file" required [ngClass]="{'is-invalid':f.touched && cvFile.invalid}" name="userCv" #cvFile="ngModel" [(ngModel)]="signupModel.cvFile" (change)="selectCvFile($event)" />
    <div *ngIf="cvFile.invalid && f.touched" class="invalid-feedback">
        <div *ngIf="cvFile.errors.required">Cv is required</div>
        </div>
    </div>
    <button type="submit"> Save</button>
</form>

Answer 1

以下功能通过窗体组中的控件循环并轻轻触摸它们，我们可以使用cvFile.touched && cvFile.invalid条件来显示错误消息。

 /**
   * Marks all controls in a form group as touched
   * @param formGroup - The form group to touch
   */
  private markAsTouched(formGroup: FormGroup) {
    (<any>Object).values(formGroup.controls).forEach(control => {
      control.markAsTouched();

      if (control.controls) {
        this.markAsTouched(control);
      }
    });
  }

Stackblitz

角度验证形式

1 个答案: