angular 2 个模型驱动的嵌套表单组件

Question

我有：

我正在构建一个 ionic 2 应用程序并构建了一个基本的 angular 2 组件，其中包含

一个输入字段
显示输入标题的标签
显示任何验证错误的标签

我将把它称为我的输入组件

我有一个带有表单的页面组件，目前有文本输入。 1 个常规输入（密码）和 1 个包含在我的输入组件（用户名）中的输入。

这是我页面组件的相关部分

ngOnInit() {
  this.loginForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
  });
}

这是页面组件模板

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

  <!-- My input component -->
  <aw-input-text id="username" name="Username" [formInput]="loginForm.controls.username"></aw-input-text>

  <!-- A standard input control -->
  <ion-item [class.error]="loginForm.controls.password.errors">
    <ion-label floating>Password</ion-label>
    <ion-input type="text" value="" name="password" formControlName="password"></ion-input>
    <p *ngIf="loginForm.controls.password.errors">This field is required!</p>
  </ion-item>

  <button type="submit" class="custom-button" [disabled]="!loginForm.valid" block>Login</button>

</form>

这是我的输入组件的模板

<!-- Component template -->
<form [formGroup]="formGroup">
    <ion-item>
        <ion-label floating>{{inputName}}</ion-label>
        <ion-input type="text" formControlName="inputValue"></ion-input>
        <p *ngIf="!formGroup.controls.inputValue.valid">This field is required!</p>
    </ion-item>
</form>

这是输入组件

import {Component, Input} from '@angular/core';
import {FormBuilder} from '@angular/forms';

@Component({
  selector: 'aw-input-text',
  templateUrl: 'build/shared/aw-input-text/aw-input-text.html'
})
export class AwInputText {

  @Input('formInput')
  public formInput;
  @Input('name')
  public inputName;
  public formGroup;
  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
     this.formGroup = this.formBuilder.group({
        inputValue: this.formInput
     });
  }

}

组件正确呈现。

问题：

组件内的输入不会更新其所在表单的有效状态。

当我填写用户名和密码后，表格就生效了

当我填写密码和用户名时，表格仍然无效

所以表单可以看到输入组件的有效状态，只是输入组件改变有效状态不会触发表单更新。

可能的解1

如本文所述和plunk

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=preview

我可以修改我的页面组件来创建一个表单组，其中包含一个嵌套表单组，用于我想在我的输入组件中使用的每个表单控件

ngOnInit() {
  this.loginForm = this.formBuilder.group({
    username: this.formBuilder.group({
      username: ['', Validators.required],
    }),
    password: ['', Validators.required],
  });
}

这个解决方案符合文章中的场景，他们正在添加一个输入控件数组，但就我而言，我认为这感觉很糟糕

可能的解法2

我考虑过的另一个 hacky 解决方案是使用我的输入组件的 @output 指令在页面组件上触发一个事件，该事件在输入组件更新时刷新表单。

更新到输入组件

this.formGroup.controls.inputValue.valueChanges.subscribe(value => {
  this.formUpdated.emit({
    value: value
  })
});

更新页面组件

public onUpdated(value){
  this.loginForm.updateValueAndValidity();
}

并更新页面组件模板

<aw-input-text id="username" name="Username" (updated)="onUpdated($event)" [formInput]="loginForm.controls.username"></aw-input-text>

这确实为我提供了所需的功能，但我认为在每个表单页面上都有一个事件处理程序以使输入组件正常工作似乎也有点老套。

问题

有没有办法让我的组件更新它所在表单的有效状态（请记住，我想在每个表单中多次 re-use 这个组件）而不求助于上述解决方案。

Answer 1

您可以 @Input 您的 loginForm 进入嵌套组件，比如 parentForm。然后在子组件init上注册nested formGroup到parentForm，在子组件destroy上注销。

Answer 2

我在我的案例中所做的（以及嵌套动态表单）在某种程度上类似于 Marcin 的响应。

我将现有的 FormGroup 作为 parentForm 传递，我的 Component 的视图如下所示：

<fieldset [formGroup]="parentForm">
    <label *ngIf="label" [attr.for]="key">{{label}}</label>
    <input [id]="key" [type]="type" [formControlName]="key" />
</fieldset>

符合我的需要。希望对你也有帮助。

更新： 我创建了一个用于加速动态表单创建的库。你可以看看我是如何使用这个答案的技术的：https://www.npmjs.com/package/dorf

Answer 3

谢谢大家的回答。最后我们创建了两个组件，一个自定义表单组件和一个自定义输入组件。

我们在自定义表单组件中嵌套了尽可能多的自定义输入组件，自定义表单组件使用@ContentChildren 来识别和注册所有子自定义输入组件。

这样我们就不必将表单传递给每个输入，也不会为每个输入设置一堆乱七八糟的嵌套表单组。

// Each CustomInputText component exposes a FormControl and 
// a control definition which has additional info about the control
@ContentChildren(CustomInputText, {descendants: true})
public customInputComponents: QueryList<CustomInputText>;

private initialised;

public ngAfterContentChecked() {
  // Only initialise the form group once
  if (!this.initialised) {
    this.initialised = true;
    this.customInputComponents.forEach((input)=>{
        this.formGroup.addControl(input.controlDefinition.id, input.formControl); 
    });
  }
}

angular 2 个模型驱动的嵌套表单组件

angular 2 model driven nested form components

javascript

forms

angular2-forms

angular2-components

angular