angular - 将表单传递给子组件并在子组件中验证表单

Question

我在父组件中有一个提交按钮。我还有几个子组件。现在我想启用按钮，以便在验证通过后将表单的所有值保存在所有子组件中。 在父组件中，我创建了表单组。

 public mainForm: FormGroup;

在父组件的构造函数中，

      constructor(private fb: FormBuilder) {
       this.mainForm = this.fb.group({
       child1Form: this.fb.group({
           projectName: [null, Validators.required],
           projectSource: [null, Validators.required]
       });
      });
     }

在父级 html 中，我们将表单传递给子级。

<div>
  <app-child1 [child1Form]="mainForm.controls['child1Form']"></app-child1>
</div> 

在子组件html中，代码为:

<form [formGroup]="child1Form">
   <div>
      <input [(ngModel)]="projectName" formControlName="projectName">
   </div>
   <div>
      <input [(ngModel)]="projectSource" formControlName="projectSource">
   </div>
</form>

在子组件的ts文件中，我们使用来自父组件的表单。

 @Input() child1Form: any;

我要的是在父组件的ngOnInit中，检查表单验证。

ngOnInit() {
   this.mainForm.statusChanges.subscribe(data => {
      const f = this.mainForm.controls['child1Form'];
      if(f.valid || f.dirth)
        // do something such as enable/disable the submit button
   });
}

但是我的问题是即使我更改了子组件的输入控件中的文本，代码也没有到达 statusChanges 部分。我假设当我输入某些内容时，表单的值或状态会发生变化，以便我可以进行验证。

Answer 1

让我们逐步解决这个问题:

1. 创建一个parent & child组件
2. 在 parent.component.html 中添加以下 HTML 模板

<form>
  <app-child></app-child>
  <button>Submit</button>
</form>

1. 在 child.component.html 中添加以下 HTML 模板

<form [formGroup]="child1Form">
  <div>
    <input type="text" formControlName="projectName" required>
  </div>
  <div>
    <input type="text" formControlName="projectSource" required>
  </div>
</form>

1. 在 child.component.ts 中为 child1Form 创建一个 formGroup(我已经在 'child.component.ts' 中声明了 'child1Form' 在 'parent.component.ts')

  child1Form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.child1Form = this.fb.group({
      projectName: ['', Validators.required],
      projectSource: ['', Validators.required]
    })
  }

1. 现在，订阅 statusChanges 并发出 child.component.ts
中的值

  @Output() isChild1FormValid: EventEmitter<boolean> = new EventEmitter<boolean>();

  ngOnInit() {
    this.child1Form.statusChanges.subscribe(value => {
      if(value === 'VALID') {
        this.isChild1FormValid.emit(true);
      }
    });
  }

1. 监听 parent.component.html
中发出的值

<form>
  <app-child (isChild1FormValid)="enableSubmitButton($event)"></app-child>
</form>

1. 将值保存在 parent.component.ts
中的属性中

  isChild1FormValid: boolean;

  enableSubmitButton(isValid: boolean) {
    this.isChild1FormValid = isValid;
  }

1. 如果 isChild1FormValid 属性为 true (parent.component.html)，则启用提交按钮

<form>
  <button type="submit" [disabled]="!isChild1FormValid">Submit</button>
</form>

1. Full working demo in StackBlitz