What is the method for activating a validation of a child component from a parent component during the submission process in Angular 4

Question

What is the method for activating a validation of a child component from a parent component during the submission process in Angular 4

I have a scenario where I have multiple child form components included in a parent component. Each child component contains its own form group, and I need to validate all child forms when the user clicks on submit in the parent form.

How can I trigger validation for child forms from the parent component upon submission? I am using FormBuilder in each child component.

I am able to validate the child fields when the user interacts with them, but if they try to submit without entering any information or interacting with the fields, the validations are not displaying errors.

parent.component.html

<form>
    <child1></child1>
    <child2></child2>
    <child3></child4>
    <child4></child4>
''''
''''
''''
</form>

child1.component.html

<div formgroup="child1group">
      <div formarray= "child1array">
      ....
      ...
      ...
      </div>
</div

child2.component.html

<div formgroup="child2group">
      <div formarray= "child2array">
      ....
      ...
      ...
      </div>
</div

Can anyone guide me on how to implement this validation in Angular 4?

angular validation typescript

Answer 1

Answer №1

To pass the Formcontrol to the Parent component as OUTPUT, use the function SaveConsole() for validation when the button is clicked.

child1.component.ts

@Output() public childControls = new EventEmitter();

 public ngOnInit() {
        this.childControls.emit(this.child1group);   
        this.child1group.valueChanges.subscribe(() => {
            this.childControls.emit(this.child1group);
        });
  }

parent.component.html

   <form>
        <child1 (childControls)="child1Control = $event"></child1>
         <button (Click)=SaveConsole()> Submit </butto>
   </form>

parent.ts

   public child1Control: FormGroup;
   public SaveConsole() {
          if (this.child1Control.valid) {
            // SAVE FORM
          } else {
            this.validateAllFormFields(this.child1Control);  
          }
      }
     public validateAllFormFields(formGroup: FormGroup) {
      Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
        this.validateAllFormFields(control);
      }
    });
}

Answer 2

To pass the Formcontrol to the Parent component as OUTPUT, use the function SaveConsole() for validation when the button is clicked.

child1.component.ts

@Output() public childControls = new EventEmitter();

 public ngOnInit() {
        this.childControls.emit(this.child1group);   
        this.child1group.valueChanges.subscribe(() => {
            this.childControls.emit(this.child1group);
        });
  }

parent.component.html

   <form>
        <child1 (childControls)="child1Control = $event"></child1>
         <button (Click)=SaveConsole()> Submit </butto>
   </form>

parent.ts

   public child1Control: FormGroup;
   public SaveConsole() {
          if (this.child1Control.valid) {
            // SAVE FORM
          } else {
            this.validateAllFormFields(this.child1Control);  
          }
      }
     public validateAllFormFields(formGroup: FormGroup) {
      Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
        this.validateAllFormFields(control);
      }
    });
}

What is the method for activating a validation of a child component from a parent component during the submission process in Angular 4

Answer №1

Similar questions

Creating a Circle with Pixi.js v4 and Typerscript in IONIC 2

Creating a Typescript interface that includes keys from another interface

How to retrieve a stored value using Ionic 3 native storage

Ways to resolve the issue of the missing property 'ganttContainer' on the 'Gantt' type

Is it necessary for the React generic type prop to be an extension of another type

Exporting enums within types in React Typescript

Exploring Angular: Enhancing functionality with a custom pipe encapsulating ng-translate service

Extract Method Parameter Types in Typescript from a Generic Function

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

Looking for an Angular Material component that displays a list of attributes?

Using ES6, one can filter an array of objects based on another array of values

Contrast: Colon vs. Not Equal Sign (Typescript)

Before accessing the page, please ensure to make a double request

Oops! The program encountered an issue on the production environment, but it's running smoothly

Adjust the colors of two elements by clicking a button's onclick event

Experiment with Observable in fakeAsync, applying a delay and tick functions through Jasmine testing framework

The componentWillReceiveProps method is not triggered when a property is removed from an object prop

Send data to assembled Angular directives

What is the best way to fill the dropdown options in every row of a data table?

The mat-table fails to populate with data retrieved from the rest service