Javascript 提交论坛时未显示子表单中的角材料2 mat错误

将带有输入的子组件放置在父窗体中，并以无效方式提交不会仅在父窗体中显示子组件中的错误。子项中的mat错误仅在单击输入时显示

使用此父窗体复制错误

  @Component({
      selector: 'lyx-parent-form',
      template: `
  <form novalidate autocomplete="off" role="form" [formGroup]="form" (ngSubmit)="onSubmit()">
    <mat-form-field>
     <input type="password" formControlName="currentPassword" matInput placeholder="current password">
     <mat-error *ngIf="form.get('currentPassword').hasError('required')">current required</mat-error>
    </mat-form-field>

    <lyx-child [form]="form"></lyx-child>

    <button type="submit">submit</button>
  </form>`
    })
    export class ParentFormComponent {
      form: FormGroup;
      constructor(fb: FormBuilder) {
        this.form = fb.group({'currentPassword': ['', [Validators.required]]});
      }  
      onSubmit() {}   
    }

@组件({
选择器：“lyx父窗体”，
模板：`
所需电流
提交
`
})
导出类ParentFormComponent{
表格：表格组；
构造函数（fb:FormBuilder）{
this.form=fb.group（{'currentPassword'：[''[Validators.required]]}）；
}  
onSubmit（）{}
}

子组件

 @Component({
  selector: 'lyx-child',
  template: `
  <div [formGroup]="form">
    <mat-form-field>
      <input type="password" formControlName="newPassword" matInput placeholder="password">
      <mat-error *ngIf="form.get('newPassword').hasError('required')">Password Required</mat-error>
    </mat-form-field>
   </div>  `
})
export class ChildComponent implements OnInit {
  @Input() form: FormGroup;

  ngOnInit(): void {
    const newPassword = new FormControl('', Validators.compose([Validators.required]));
    this.form.addControl('newPassword', newPassword);
  }
}

@组件({
选择器：“lyx子对象”，
模板：`
需要密码
`
})
导出类ChildComponent实现OnInit{
@Input（）表单：FormGroup；
ngOnInit（）：void{
const newPassword=newformcontrol（“”，Validators.compose（[Validators.required]）；
this.form.addControl（'newPassword'，newPassword）；
}
}

在我能够更好地理解父/子表单交互方式之前，这里有一个解决方法

提交父表单时，手动将子“newPassword”控件设置为“toucted”

---

我提出了以下解决方案，它适用于任意数量的嵌套表单。要使用此指令，只需将

formSubmittedSync

添加到任何子表单组，例如

---

找到这个问题的解决方案了吗？没有，我想angular会在他们的更新中修复它，直到那时我会使用你的解决方法谢谢

onSubmit(): void {
  this.form.controls.newPassowrd.markAsTouched({onlySelf: true});
}

import { Directive, SkipSelf } from "@angular/core";
import { FormGroupDirective, ControlContainer } from "@angular/forms";

@Directive({
  selector: '[formSubmittedSync]'
})
export class FormSubmittedSyncDirective {
  constructor(
    @SkipSelf() private parentFormGroupDirective: FormGroupDirective,
    private formGroupDirective: FormGroupDirective) {
    this.parentFormGroupDirective.ngSubmit.asObservable().subscribe(() => {
      (this.formGroupDirective as any).submitted = true;
      this.formGroupDirective.ngSubmit.emit();
    });
  }
}