How to validate all dropped components using ngx-drag-drop with Angular forms?

I am using the ngx-drag-drop library in my Angular project. Each dropped item represents a component, and each component can have multiple child components, all of which are using Angular reactive forms.

I need to check the validity of all the dropped components (and their child components) after a drop event, so I can ensure the forms in all components are valid.

How can I trigger validation checks for all components after a drop event? Is there a way to gather and check the form validity of all dropped components dynamically?

Here’s a simplified version of what I’m working with:

Each dropped component contains a form.

• Some components have child components, which also contain forms.
• I want to ensure that all dropped forms are valid before allowing further action.
• What would be the best approach to achieve this validation across multiple dropped components?

I wrote this function but it's going to check validity of a single component:

public hasValidator(control: string): void {
if (this.form.controls[control].hasValidator(Validators.required)) {
let valid = this.form.controls[control].valid;
this.isValid$ = this.isValid$ && valid;
}
}

Continue reading...