javascript - Angular 响应式(Reactive)嵌套形式

Question

我正在尝试在我的 Angular 项目中嵌套多个响应式表单，并且这些表单位于不同的组件中。

例如，我有一个组件，其中包含一个表单，该表单有两个输入，一个输入名称，一个输入描述，还有一个提交按钮。我将此组件称为 NameDescComponent

我计划在多个页面和表单中使用此组件。这是组件的 html。

<form [formGroup]="nameDescForm" (ngSubmit)="customEmit()">
    <div fxLayout="row" fxLayoutGap="10px" fxFlex>
      <mat-form-field>
        <input matInput placeholder="Name" formControlName="name">
      </mat-form-field>
      <mat-form-field fxFlex>
        <input matInput placeholder="Description" formControlName="description">
      </mat-form-field>
    </div>
    <div fxLayout="column" fxLayoutGap="10px">
      <button type="submit" mat-raised-button color="primary">
        {{buttonText}}
      </button>
      <div>
      </div>
    </div>
  </form>

这是缩写的ts文件

public nameDescForm: FormGroup;



@Input() public buttonText: string;
  @Output() public save: EventEmitter<any> = new EventEmitter<any>();
  @Output() public nameDescFormEmit: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

  constructor(fb: FormBuilder) {
    this.nameDescForm = fb.group({
      'name': ['', Validators.required],
      'description': ['']
    });
  }

  public ngOnInit() {
    console.log(this.nameDescForm);
    this.nameDescFormEmit.emit(this.nameDescForm);
  }

  public customEmit() {
    this.save.emit();
  }

然后在我使用该组件的页面中，我还有另一个表单，其中包含 NameDescComponent，如下所示

<form [formGroup]="parentForm" (ngSubmit)="customEmit()">

  <app-name-description (nameDescFormEmit)="getNameDescForm($event)" buttonText="Save" (save)="save()"></app-name-description>

  <input type="test" formControlName="test">

</form>

目前我正在做的是将 nameDescFrom 从它的组件传递到带有 Output 和 EventEmitter 的 ParentComponent。这个解决方案似乎有效，当我更新 child 时，我能够访问这些值。但缺点是当我去提交表单时，我必须检查 parentForm 和 nameDescFrom 是否都有效并分别管理这两个表单。

我想知道是否有更好的方法来解决这个问题？我何时可以从父表单中访问 nameDescFrom？

谢谢

Answer 1

要将您的表单与嵌套表单合并并对所有表单进行单一验证，您可以使用 formbuilder在根表单组件中创建整个模型对象结构。然后在其 html 模板中，您将添加子表单的自定义元素(例如:<nested-form>)，这将呈现子表单。

参见示例:https://stackblitz.com/edit/angular-m5fexe )

有用的 Angular 文档链接:

• > https://angular.io/guide/reactive-forms#creating-nested-form-groups
• > https://angular.io/guide/reactive-forms#step-3-generating-form-controls

代码:

export class Form1Component  {
  @Input() name: string;

  public dummyForm: FormGroup;

  constructor(
      private _fb: FormBuilder,
  ) {
      this.createForm();
  }

  createForm() {
    this.dummyForm = this._fb.group({
      username: ['username', Validators.required],
      nestedForm: this._fb.group({        
        complement1: ['complement1', Validators.required],
        complement2: ['complement2', Validators.required],
      })
    });
  }

  submit() {
    if (this.dummyForm.valid) {
      console.log('form AND subforms are valid', this.dummyForm.value);
    } else {
      console.warn('form AND/OR subforms are invalid', this.dummyForm.value);
    }
  }
}

Form1Component 的模板:

<form [formGroup]="dummyForm" (ngSubmit)="submit()">    
    <div>
      <label for="username">Root Input</label>
      <input type="text" id="username" formControlName="username"/>
    </div>
    <nested-form [parentForm]="dummyForm"></nested-form>
    <button>Send</button>    
  </form>

嵌套表单代码:

export class NestedFormComponent {
  @Input()
  public parentForm: FormGroup;
}

嵌套表单模板:

<form [formGroup]="parentForm">
    <div formGroupName="nestedForm">
      <div>
        <label for="complement1">Nested input 1</label>
        <input type="text" formControlName="complement1"/>
      </div>
      <div>
        <label for="complement1">Nested input 1</label>
        <input type="text" formControlName="complement2"/>
      </div>
    </div>
  </form>