Question

我在名为“ MainService”的服务中有一个主表格（实际表格要长得多）。看起来像这样-

export class MainService {

 this.mainForm = this.formBuilder.group({
            A: ['', Validators.required],
            B: '',
            C: '',
            D: this.formBuilder.array([]),
            E: this.formBuilder.array([]),
            F:'',
            G: this.formBuilder.array([]),
            H: this.formBuilder.array([]),
            I: this.formBuilder.array([]),
        });
    }
}

不同的组件查看表单的值，并通过导入服务来更改表单。模板看起来像-

<mat-form-field>
    <input matInput [formControl]="MainService.A">
    <mat-label></mat-label>
</mat-form-field>

这是在不同组件之间共享表单的最佳方法吗？每个组件在表单中代表一个不同的表单控件，因此它们必须查看相同的表单。

例如，这是学生用来填写其阅读文章的许多详细信息的表格（书名，页数，作者，主题等）。

本书的每个细节都是主表单中的表单控件，每个组件负责更新不同的表单控件（代表名称输入的组件，代表作者输入的组件。）

谢谢！

Answer 1

一种不错的方法（我认为）是创建一个包含您希望共享的表单的小组件，并使用@Input和@Output属性与其进行交互。

例如，@Input s可用于设置初始表单状态，@Output s可用于对表单事件做出反应（如果使用响应式表单）。

<my-shared-form
  [initialState]="{ control1: 'nice'}"
  (formValuesChanged)="doSomeThingWithValidForm($event)"
></my-shared-form>

表单组件：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-shared-form',
  templateUrl: './my-shared-form.component.html',
  styleUrls: ['./my-shared-form.component.scss'],
})
export class MySharedFormComponent implements OnInit {
  @Input()
  public initialState: { [key: string]: any };

  @Output()
  public formValuesChanged = new EventEmitter<{ [key: string]: any }>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      control1: [this.initialState.control1 ? this.initialState.control1 : ''],
    });

    this.form.valueChanges.subscribe((val) => {
      this.formValuesChanged.emit(val);
    });
  }
}

表单组件模板：

<form [formGroup]="form">
  <input type="text" formControlName="control1">
</form>

Angular 5，在不同组件之间共享表单的最佳方法是什么

1 个答案:

Angular 5，在不​​同组件之间共享表单的最佳方法是什么

1 个答案:

Angular 5，在不同组件之间共享表单的最佳方法是什么