0

使用 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应显示有关“详细信息”和“高级”输入的数据。如何在父组件和子组件之间传递信息，以便父​​组件可以跟踪表单状态？理想情况下，这适用于模板驱动和反应式表单。

4

1 回答 1

0

正如 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);在构建表单后调用。

于 2017-03-13T10:04:28.917 回答