Propagate validation to nested form in Angular

Issue

I have parent form "Quest" including a children form "Riddle".

In order to access it, i'm using the annotation @ViewChild as following :

quest.component.ts

export class CreateQuestComponent implements OnInit {
  @ViewChild(RiddleFormComponent, {static: true}) riddleForm!: RiddleFormComponent;

  minDate!: String;
  maxDate!: String;
  createQuestForm!: FormGroup;
  errorField="";


  constructor(private formBuilder: FormBuilder, private questService: QuestService, private authService: AuthService, private tokenStorage: TokenStorageService) {

  }

  ngOnInit(): void {

    const dtToday = new Date();
    this.minDate = stringifyDate(dtToday.getFullYear(), (dtToday.getMonth() + 1), dtToday.getDate());
    this.maxDate = stringifyDate((dtToday.getFullYear() + 1), (dtToday.getMonth() + 1), dtToday.getDate());

    this.createQuestForm = this.formBuilder.group({
      hunterFirstName: ['', [Validators.required, Validators.minLength(2)]],
      hunterLastName: ['', [Validators.required, Validators.minLength(2)]],
      hunterEmail: ['', [Validators.required, Validators.email]],
      launchDate: ['', [Validators.required, Validators.nullValidator]],
      penaltyTime: ['', [Validators.required, Validators.nullValidator]],
      participantsEmail: this.formBuilder.array([]),
      riddle: this.riddleForm.createGroup()
    })
  }
}

Here is the HTML template when i call the subform :

Quest.component.html

 <form [formGroup]="createQuestForm" class="primary-form" (ngSubmit)="onSubmit()" ngNativeValidate>

                                 .
                                 .
                                 .
                             all inputs

      <app-riddle-form></app-riddle-form>
    
 </form>

Here is the code related to 'Rddle' component :

riddle-form.component.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-riddle-form',
  templateUrl: './riddle-form.component.html',
  //TODO add dynamic path styleUrls
  styleUrls: ['../../quest/create-quest/create-quest.component.scss', './riddle-form.component.scss'],


})
export class RiddleFormComponent implements OnInit {

  riddleFormGroup!: FormGroup;
  errorField = "";

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
  }

  createGroup() {
    this.riddleFormGroup = this.formBuilder.group({
      text: ['', [Validators.required, Validators.minLength(2)]],
      answer: ['', [Validators.required, Validators.minLength(2)]],
    })

    return this.riddleFormGroup;
  }

}

riddle-form.component.html

<form [formGroup]="riddleFormGroup" class="included-form" ngNativeValidate>

  <div class="item">

    <textarea type="text" name="text" class="form-control" [ngClass]="{'border-red': errorField=='riddleText'}" formControlName="text" placeholder="What is your riddle ?"
              minlength="10" required> </textarea>

    <input type="text" class="form-control" [ngClass]="{'border-red': errorField=='riddleAnswer'}" name="answer" placeholder="Answer"
           formControlName="answer" minlength="2"
           maxlength="20"  required/>

  </div>

</form>

Everything work fine. I can get submitted data from all fields, even from 'RiddleForm'

The problem, is when i submit the form, the validation work fine for all fields except for the nested form Riddle despite the Validators setted in 'riddle-form.component.ts':

pre-validation working for other fields :

Solution

I finnaly found the problem.

It's because there is 2 form balise nested. And when the main form is submitted, the nested one is forgotten by the browser

So, for the nested one just declare it like this as a <div> :

    <div [formGroup]="riddleFormGroup" class="included-form" (ngSubmit)="onSubmit()"  ngNativeValidate>
    </div>

And implement it as a normal component in the main template :

<app-riddle-form></app-riddle-form >

Answered By - LedZelkin