I am seeking assistance with Angular as I do not have expert knowledge in it. My goal is to implement form validation in a component named "viewForm". This form is created using an object array loop called "points". Towards the end of the "viewForm", I have included another component named "footer" which contains 4 buttons that trigger different services to update values.
The challenge I am facing is adding validation to the input fields in the form (required), especially since the buttons are located in a different component than the form itself. Most examples I have come across focus on submit buttons or having both buttons and form in the same component. In my case, it is different. It seems like I need to set up validation for the form and then somehow pass this validation to the "footer" component to check before calling the service.
Below is a snippet of "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>
The structure of the footer component is as follows:
<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>