如何修复嵌套模板的ng无效?

Question

我有一个包含嵌套模板(子表单)的表单。所有内容都会呈现，但只有父窗体中的输入有效。子模板/表单中的所有输入都ng-invalid。由于它们无效，因此不会显示输入中的占位符，而是显示一个难看的[object Object]显示占位符应位于的位置。

在其他尝试中：
1.为了隔离问题，我完全消除了嵌套表单中的验证，在这种情况下，子模板中的输入确实会变得ng-valid并且它们的占位符会正确呈现，(但请注意容器<app-sub-enroll-form>仍然ng-invalid)。因为消除验证解决了inputs的ng-invalid问题，这表明问题出在验证过程中的某个地方，但我看不出它可能在哪里，因为子模板和父模板的过程几乎相同(两者都使用相同的TemplateValidationService服务)。子模板中的某个地方验证绑定一定不正确？
2.在嵌套模板中，我没有将form设置为新创建的FormGroup，而是尝试使用this.form.addControl将新控件添加到现有FormGroup，但收到控制台错误，指出_this.form未定义。
3.我尝试使嵌套模板成为<form>，也只是一个<table>，但这没有任何效果。

父模板

<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>

子模板

<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>

父组件

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);
}

子组件

export class SubEnrollFormComponent implements OnInit {
@Input() objEnroll : NameId | EmailData | PhoneData | AddressData;
objKeys: Array<any> = [];
@Input() form: FormGroup;
formControls = {};
constructor(private templateVal: TemplateValidationService) { }
ngOnInit() {
this.objKeys = Object.keys(this.objEnroll);
this.objKeys.forEach((key) => {
let validators = [];
this.templateVal.handleValidation(key, validators);
this.formControls[key] = new FormControl(this.objEnroll[key], validators);
})
this.form = new FormGroup(this.formControls);
}
}

模板验证服务：

export class TemplateValidationService {
constructor() { }
handleValidation(key: string, validators: Array<any>) {
validators.push(this.noSpecialChars);
}
noSpecialChars(c: FormControl) {
let REGEXP = new RegExp(/[~`!@#$%^&*+=-[]';,/{}|":<>?()]/);
return REGEXP.test(c.value) ? {
validateEmail: {
valid: false}
} : null;
}
}

我希望消除ng-invalid问题(允许占位符正确呈现)，同时在嵌套模板中保持验证。如果有任何想法，非常感谢！

Answer 1

非常感谢@x4rf41建议使用调试器。现在我有了该工具，我看到虽然我以为我正在将字符串传递给子表单中的验证处理程序，但我实际上是在传递一个对象，因此验证处理程序将输入标记为ng-invalid是正确的。为了解决这个问题，我需要在创建表单控件时添加一个额外的维度：this.formControls[key] = new FormControl(this.objEnroll[key][1], validators)(与之前的：this.formControls[key] = new FormControl(this.objEnroll[key], validators)相反。令人尴尬的疏忽，但现在我知道如何使用调试器，希望将来我会在发布到社区之前捕获这些类型的错误。非常感谢大家的耐心和帮助，因为我很快就掌握了这些东西！