Styjun

I have a form which includes nested templates (child forms). Everything renders, but only the inputs in the parent form are valid. All the inputs in the child templates/forms are ng-invalid. Because they are invalid, the placeholders in the inputs are not showing, and instead an unsightly [object Object] shows where the placeholder should be.

Among other attempts:

1. To isolate the problem, I've eliminated validation in the nested form altogether, in which case the inputs in the child template do become ng-valid and their placeholders render properly, (but note the container <app-sub-enroll-form> remains ng-invalid). Because eliminating validation solves the ng-invalid problem for the inputs, this suggests that the problem lies somewhere in the validation process, but I can't see where it could be, as the process is virtually identical for the child template vs. the parent template (both use the identical TemplateValidationService Service). Somewhere in the child template the validation binding must be incorrect?

2. In the nested template, instead of setting the form to a newly created FormGroup, I tried adding the new controls to the existing FormGroup using this.form.addControl, but received console error that _this.form was undefined.

3. I've tried making the nested template a <form>, and also just a <table>, but this had no effect.

Parent Template

<form #myForm="ngForm" [formGroup]="form">
 <h3>Form</h3>
 <table>
 <tr *ngFor="let key of memberKeys">
 <td>key</td>
 <ng-container *ngIf="topLevel(member[key]); else subTable">
 <td><input type="text" name="key" placeholder="Enter key Here" formControlName="key"/></td>
 </ng-container>
 <ng-template #subTable>
 <app-sub-enroll-form [objEnroll]="member[key]" [formGroup]="form"></app-sub-enroll-form> 
 </ng-template>
 </tr>
 </table>
 <button type="submit">Submit</button>
</form>

Child Template

<form [formGroup]="form">
 <table style="margin-left: 5%;">
 <tr *ngFor="let key of objKeys">
 <td>key</td>
 <td><input type="text" name="key" placeholder="Enter key Here" formControlName="key"/></td>
 </tr>
 </table>
<form>

Parent Component

export class EnrollFormComponent implements OnInit {
 formControls = ;
 form: FormGroup;
 @Input() member: Member = new Member("");
 memberKeys = Object.keys(this.member);

 constructor(private templateVal: TemplateValidationService ) 
// console.log(this.memberKeys);
 

ngOnInit() 
 this.memberKeys.forEach((key) => 
 let validators = [];
 this.templateVal.handleValidation(key, validators);
 this.formControls[key] = new FormControl(this.member[key], validators);
 )
 this.form = new FormGroup(this.formControls);
 

Child Component

export class SubEnrollFormComponent implements OnInit PhoneData 

Template Validation Service:

export class TemplateValidationService 

 constructor() 

 handleValidation(key: string, validators: Array<any>) 

 validators.push(this.noSpecialChars);
 

 noSpecialChars(c: FormControl) ":<>?()]/);
 return REGEXP.test(c.value) ? 
 validateEmail: 
 valid: false
 : null;
 

I'm hoping to eliminate the ng-invalid issue (allowing placeholders to render properly) while keeping validation in the nested template. Many thanks in advance if any ideas!

Many thanks to @x4rf41 for suggesting use of the debugger. Now that I have that tool at my disposal, I see that whereas I had thought I was passing a string to the validation handler in the child forms, I was actually passing an object, so the validation handler was correct in marking the input as ng-invalid. To fix this, I needed to add an extra dimension when creating the form control: this.formControls[key] = new FormControl(this.objEnroll[key][1], validators) (as opposed to the previous: this.formControls[key] = new FormControl(this.objEnroll[key], validators). Embarrasing oversight, but now that I know how to use the debugger, hopefully in the future I'll catch these types of errors before posting to the community. Many thanks to everyone for their patience and help as I get up to speed on this stuff!