角反应嵌套形式

Posted 2023-03-13

【中文标题】角反应嵌套形式

【英文标题】：Angular reactive nested forms

【发布时间】：2019-06-04 04:37:42

【问题描述】：

我正在尝试在我的 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 从其组件传递到带有输出和 EventEmitter 的 ParentComponent。这个解决方案似乎有效，当我更新孩子时，我可以访问这些值。但不利的一面是，当我提交表单时，我必须检查parentForm 和nameDescFrom 是否都有效并分别管理这两个表单。

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

谢谢

【问题讨论】：

您可以将子表单包含在父表单中。然后通过绑定将 form.get('') 传递给孩子。因此，您无需单独管理表单。

如果您的 form.value 类似于 name:..,description:...,others.properties 而不是 othersproperties:..,group:name:..,description:.. . 使用 FormgroupDirective，如 ***.com/questions/54073280/…

嗨，我们（在工作中）一直在研究这个话题，我给出了一个正确的答案，你可能想在这里查看***.com/a/55457210/2398593 :)

【参考方案1】：

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

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

有用的角度文档链接：

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>

【讨论】：

在您的示例中，嵌套示例知道父级，而一个好的做法是父级知道子级（这样就没有交叉依赖）。是否可以在Form1Component 中使用formGroupName 并且只向孩子公开嵌套表单？

实际上嵌套表单对父表单一无所知（可能只是变量命名让您这么认为）。嵌套表单从父级知道的唯一一件事是它必须通过@Input 传递FormGroup。所以它基本上就像@Input 的所有标准用法一样，孩子不应该知道父母的事实在这里得到完全尊重。

【参考方案2】：

你也可以使用自定义的表单控件，它是angular内置的概念。

我们的想法是拥有一个自定义组件，作为父表单和嵌套表单之间的“桥梁”。自定义组件将侦听嵌套表单的“更改”事件，并使用它更新其值。父窗体将自定义控件视为单个字段，尽管其值将是包含嵌套窗体控件值的对象。

自定义组件应实现一个名为 ControlValueAccessor 的接口，通过该接口，Angular 提供了更新自定义控件状态（例如值、有效、已触摸、原始等）所需的一切。通过这种方式，您实际上可以管理自定义控件状态，以便父窗体可以像对待任何其他窗体控件一样对待它。

您可以在以下链接中阅读：

https://blog.sreyaj.dev/custom-form-controls-controlvalueaccessor-in-angular

https://medium.com/@majdasab/implementing-control-value-accessor-in-angular-1b89f2f84ebf

https://indepth.dev/posts/1055/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms