typescript - validarea Angular 2+ în componenta copil

Nu am cunoștințe de expert în Angular și aș avea nevoie de ajutor. Vreau să validez un formular care este plasat într-un component numit „viewForm”. Formularul este generat printr-un ciclu al unui array de obiecte numit „points”. La sfârșitul „viewForm” includ un alt component numit „footer” care are 4 butoane care, la rândul lor, apelează diferite servicii pentru a actualiza valori etc.

Acum vreau să adaug niște validări pentru câmpurile din formular (obligatoriu), dar problema este că butoanele mele nu sunt în același component cu formularul. Cum s-ar putea rezolva asta? Am văzut exemple despre cum să faci asta cu butoane de trimitere sau atunci când butoanele sunt în același component, dar în cazul meu este diferit. Cred că trebuie să adaug validarea în formular și apoi să o transmit componentului „footer” cumva pentru a putea valida formularul înainte de a decide dacă apelez serviciul sau nu.

Iată un scurt ghid pentru „viewForm”:

<div>
  <div *ngFor="let point of points; let x = index">
    <mat-form-field class="example-full-width">
      <input matInput type="text" [(ngModel)]="point.cValue" Placeholder="">
    </mat-form-field>
  </div>
</div>
<app-footer></app-footer>

Componenta de subsol arată astfel:

<footer class="footer">
        <div class="button-row">
            <button mat-raised-button (click)="save($event)">Save</button>
            <button mat-raised-button (click)="send($event)">Send</button>
            <button mat-raised-button (click)="noDeal($event)">No Deal</button>
            <button mat-raised-button (click)="deal($event)">Deal</button>
        </div>
    </footer>

Răspuns #1

În componenta viewForm:

Poți expune metode publice pentru validarea controalelor de input ale formularului.

În componenta de subsol:

@ViewChild(viewForm) vf: viewForm;

save(e){
  this.vf.validate();
}

send(e){
  this.vf.validate();
}

Răspunsul #2

Am rezolvat-o cu validare bazată pe șablon:

<form name="inspectionForm" #inspectionForm="ngForm">
    <div>
      <div *ngFor="let point of points; let x = index">
        <mat-form-field class="example-full-width">
          <input required matInput type="text" [(ngModel)]="point.cValue" Placeholder="" name="someName">
        </mat-form-field>
      </div>
    </div>
    <app-footer [formValid]="inspectionForm.form.valid"></app-footer>
</form>

Și în componenta mea de subsol verific dacă formularul este valid. Mulțumesc, Suresh, pentru ajutorul tău.