Question

使用Angular 2，我有一个冗长，复杂的表单，我将其拆分为一个父组件和两个子组件，以便于管理。这个过程很有效，直到我需要跟踪表单状态以进行验证。虽然有关绑定模型的数据可以通过@Input轻松传输，但我无法弄清楚如何传输有关表单本身的数据。

以下是使用伪代码的示例：

@Component({
    template: `
        <form #f="ngForm">
          <basic-details [exampleModel]="exampleModel"></basic-details>
          <advanced-details [exampleModel]="exampleModel"></advanced-details>
          <p>Form data: {{f.value | json}}</p>
        </form>
    `
})
export class ParentFormComponent {
    public exampleModel: ExampleModel = new ExampleModel();
}

@Component({
    selector: 'basic-details',
    template: `
        <input type="text" name="details" [(ngModel)]="exampleModel.details">
    `
})
export class BasicDetailsComponent {
    @Input() exampleModel: ExampleModel;
}

@Component({
    selector: 'advanced-details',
    template: `
        <input type="text" name="advanced" [(ngModel)]="exampleModel.advanced">
    `
})
export class AdvancedDetailsComponent {
    @Input() exampleModel: ExampleModel;
}

在表单底部，我使用JSON管道显示表单值。 f.value应显示有关＆＃34;详细信息的数据。和＆＃34;高级＆＃34;投入。如何在父组件和子组件之间传递信息，以便父级可以跟踪表单状态？理想情况下，这适用于模板驱动和反应形式。

Answer 1

正如John所说，创建父组件和子组件共享的服务是一个很好的解决方案。然后，您可以使用FormArray来判断所有表单是否有效。

服务示例：

import { Injectable } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';

@Injectable()
export class FormService {
  private formArray: FormArray = new FormArray([]);

  addForm(formGroup: FormGroup) {
    this.formArray.push(formGroup);
  }

  allValid(): boolean {
    return this.formArray.valid;
  }

  anyDirty(): boolean {
    return this.formArray.dirty;
  }
}

在您的ParentComponent中，您希望提供服务，以便仅在父项及其子项之间共享。

@Component({
  ...
  providers: [FormService]
})

在您的组件中，您需要在构建表单后调用this.formservice.addForm(this.form);。

在父组件和子组件之间传递表单状态数据

1 个答案: