Question

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

for (int count = 0; count < values.length; count++) {
    bubbleSort(values);
    System.out.println("count = " + count);
}

在父组件的构造函数中，

 public mainForm: FormGroup;

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

      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>

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

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

我想要的是父组件的@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 }); }部分。我认为当我键入某些内容时，表单的值或状态会发生变化，因此我可以进行验证。

Answer 1

让我们逐步解决此问题：

创建一个parent和child组件
在 parent.component.html

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

在 child.component.html

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

在 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]
    })
  }

现在，订阅statusChanges并在 child.component.ts

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

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

在 parent.component.html

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

将值保留在 parent.component.ts

  isChild1FormValid: boolean;

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

如果isChild1FormValid属性为true（ parent.component.html ）

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

Full working demo in StackBlitz

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

1 个答案: