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

What causes an error when the App is enclosed within a Provider component?

Exploring Angular2's interaction with HTML5 local storage

Navigating through an interface array using *ngFor in TypeScript

Does Nativescript have a feature similar to "Hydration"?

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

Tips for removing red borders on required elements or disabling HTML validation

Component does not detect change when the same number is sent as input

What is the method for typing an array of objects retrieved from realmDB?

"Exploring the world of TypeScript Classes in combination with Webpack

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

The Nextjs application folder does not contain the getStaticPaths method

Sharing data between components in Angular 4: How to pass variables and form content to

Encountering a module not found error when attempting to mock components in Jest unit tests using TypeScript within a Node.js

Steps for generating a multer file using a link to an image

Utilizing Typescript with Angular 2 to efficiently convert JSON data into objects within HTTP requests

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

Encountering an issue while trying to upgrade angular from version 8 to version 16. The error message states: "Unable to bind to 'something' as it is not recognized as a property of 'something'."

Extracting and transforming an array into a list with the desired outcome

learning how to transfer a value between two different components in React

MVC: Issue with client-side validation ceases to function after the initial opening and closing of SimpleModal AJAX popup