Question

我有一个包含嵌套模板的表单（子表单）。一切都会渲染，但是只有父窗体中的输入才有效。子模板/表单中的所有输入均为ng-invalid。由于它们无效，因此不会显示输入中的占位符，而是显示难看的[object Object]来显示占位符应位于的位置。

其他尝试：
1.为了解决问题，我完全取消了嵌套形式的验证，在这种情况下，子模板中的输入确实变为ng-valid并且其占位符正确呈现（但请注意容器<app-sub-enroll-form>仍为ng-invalid）。因为消除验证可以解决ng-invalid的{{1}}问题，所以这表明问题出在验证过程中，但是我看不出它可能在哪里，因为该过程实际上与验证过程相同。子模板与父模板（均使用相同的inputs服务）。子模板中的某个地方验证绑定必须不正确？
2.在嵌套模板中，我尝试使用TemplateValidationService将新控件添加到现有form中，而不是将FormGroup设置为新创建的FormGroup，但收到了控制台错误this.form.addControl未定义。
3.我尝试过使嵌套模板成为_this.form，也只是使<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; } }问题（允许占位符正确呈现），同时在嵌套模板中保留验证。如有任何想法，请多谢！

Answer 1

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

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

1 个答案: