C
C
cb77772021-02-24 11:35:30
Angular
cb7777, 2021-02-24 11:35:30

How to add validation to an input in a child component?

I have a parent component with validation working, but it also has a FileUploadComponent with this template:

<p-toast></p-toast>
<form #fileUpd="ngForm">
<div class="file-container">
  <input class="form-control file-name" name="fileUpload" required style="height: 40px"  type="text" readonly="true" max="10" [(ngModel)]="fileInfo"  >
  <span class="file-button">
    <img class="m-1 p-1" *ngIf="image" [src]="image.imageAsDataUrl" height="28px" width="28px">
    <button mat-icon-button color="primary" *ngIf="fileConfig.more" ><mat-icon>more_vert</mat-icon>
      <input type="file"
          #fileInput
          (change)="fileBrowser()"
    />
    </button>
    <button mat-icon-button color="primary"  type="button" *ngIf="fileConfig.add" (click)="linkSed()"><mat-icon>add</mat-icon></button>
    <button mat-icon-button color="primary"  type="button" *ngIf="fileConfig.camera" (click)="camera()"><mat-icon>camera</mat-icon></button>
    <button mat-icon-button color="primary"  type="button"  *ngIf="fileConfig.preview" (click)="preview()"><mat-icon>zoom_in</mat-icon></button>
    <button mat-icon-button color="accent"   type="button"  *ngIf="fileConfig.cancel" (click)="deleteFile()"><mat-icon >clear</mat-icon></button>
    <button mat-icon-button color="accent" disabled><span *ngIf="uploading" class="spinner-border spinner-border-sm mr-1"></span></button>
  </span>
</div>
</form>

How to implement validation to validate a child component?
Parent component template:
<form  #form="ngForm" (ngSubmit)="onExecute(form)">
  <div class="container">
....
<div class="row">
            <div class="col-4 m-1 text-left"><label class="d-inline-block">* Шаблон заявления	 </label></div>
            <div class="col-7 m-1"><app-file-upload  name="file-upload" required tabIndex="12" [config]="fileConfig" (onUploadFinished)="getTamplateID($event)"></app-file-upload></div>
          </div>
          <div class="row">
            <div class="col-4 m-1 text-left"><label class="d-inline-block">* Подтверждающий документ	 </label></div>
            <div class="col-7 m-1"><app-file-upload name="file-upload"  required tabIndex="13" [config]="fileConfig" (onUploadFinished)="getScanId($event)"></app-file-upload></div>
          </div>
...
<div class="row col-xl-12">
            <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid || registerForm.invalid">
              <span *ngIf="loadingSubmit" class="spinner-border spinner-border-sm mr-1"></span>
              Отправить
            </button>
          </div>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question