如何修复嵌套模板的ng-invalid？

Question

我有一个包含嵌套模板（子表单）的表单。所有内容都会呈现，但只有父表单中的输入才有效。子模板/表单中的所有输入都是ng-invalid。因为它们无效，所以输入中的占位符不显示，而是一个难看的[object Object]显示占位符应该在哪里。

其他尝试： 1.为了隔离问题，我完全取消了嵌套形式的验证，在这种情况下，子模板中的输入变为ng-valid并且它们的占位符正确渲染（但请注意容器<app-sub-enroll-form>仍然是ng-invalid）。因为消除验证解决了ng-invalid的inputs问题，这表明问题出现在验证过程中的某个地方，但我无法看到它可能在哪里，因为该过程对于子模板与父模板几乎相同（两者都使用相同的TemplateValidationService服务）。在子模板中的某处，验证绑定必须是不正确的？ 2.在嵌套模板中，我没有将form设置为新创建的FormGroup，而是尝试使用FormGroup将新控件添加到现有this.form.addControl，但是收到控制台错误，_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)。尴尬的疏忽，但现在我知道如何使用调试器，希望将来我会抓住这些在发布到社区之前的错误类型。非常感谢大家的耐心和帮助，因为我快速了解这些东西！