将表单传递给子组件并验证子组件中的表单

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>

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

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

4. child1Form在child.component.ts 中创建一个 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]
    })
  }

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

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

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

6. 侦听parent.component.html 中发出的值

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

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

  isChild1FormValid: boolean;

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

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

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

9. StackBlitz 中的完整工作演示