使用反应式表单将 formControlName 转发到 Angular 中的内部组件

Question

我有一个自定义控件组件<some-input> 包装到<ext-some-input>。 SomeInput 被封装，有自己的 API 并且支持响应式表单。 ExtSomeInput 被创建为 SomeInput 的高级包装器。

我有以下 html：

<form [formGroup]="form">
    <ext-some-input formControlName="name">
</form>

和ExtSomeInput的html：

<some-input formControlName="_???_"></some-input>

问题是如何将 formControlName 转发到内部 SomeInput 组件？我需要将表单和内部 formControl 绑定起来。这可能吗？

已编辑：

我已经用这个问题创建了 stackblitz 项目：here

Answer 1

您可以在组件ext-some-input中创建@Input

ext-some-input.ts

@Input 
formControlName

ext-some-input.html

<some-input [formControlName]="formControlName"></some-input>

Answer 2

我认为您实际上正在寻找比input 更复杂的东西。

如果您想创建自定义输入，您可以创建一个将成为ControlValueAccessor 的类（自定义表单控件）。

请查看以下文章，其中解释得很好：

https://alligator.io/angular/custom-form-control

Answer 3

我遇到过类似的情况，我不想将 formControlName 传递给包装器组件。解决此问题的首选方法是仅重用从包装器组件中的父表单传递的 formGroup。您可以通过在 ExtSomeInput 组件的构造函数中注入 ControlContainer 来做到这一点：

ParentForm.component.html

<form [formGroup]="form">
  <ext-some-input controlName="name">
</form>

ExtSomeInput.component.ts

// pass the formControlName as string to wrapper
@Input public controlName: string;
public form: FormGroup;

constructor(public controlContainer: ControlContainer) {}

ngOnInit() {
  this.form = <FormGroup>this.controlContainer.control;
}

ExtSomeInput.component.html

// use ng-container to omit this from the DOM
<ng-container [formGroup]="form">
  // wrapper markup here
  <some-input [formControlName]="controlName"></some-input>
</ng-container>

Answer 4

您的内部组件可以采用@Input controlName，但不能开箱即用：

错误：formControlName 必须与父 formGroup 指令一起使用。

为了将您的控件与父 FormGroup 绑定，您可以定义viewProvider，如下所示：

import { Component, Input, OnInit} from '@angular/core';
...
import { ControlContainer, FormGroupDirective } from '@angular/forms';

@Component({
  ...
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class DateWrapperComponent implements OnInit {
    @Input() controlName: string;
}

Forked Stackblitz

如果您不知道作为ControlContainer（FormGroupDirective、FormGroupName 或FormArrayName）提供的确切指令，您可以使用更通用的方法：

viewProviders: [
  {
    provide: ControlContainer,
    useFactory: (container: ControlContainer) => container,
    deps: [[new SkipSelf(), ControlContainer]]
  }
]

Demo

Answer 5

嘿，这里要回答第二个问题，因为我们在工作中提出了一种通用方法，我们将其作为开源库发布 =)。

你可以在这里找到它：https://github.com/cloudnc/ngx-sub-form

它应该可以帮助您管理： - 嵌套形式 - 具有多态数据的表格 - 更好的打字

所有内容都在自述文件中进行了解释，并且在 /src 文件夹中提供了一个完整的示例。 （lib 实际上是在 projects/ngx-sub-form 中）。

这里也有现场演示：https://cloudnc.github.io/ngx-sub-form

Answer 6

我遇到了几乎相同的场景和问题。 Todd Motto 的 article 让我松了一口气。

他的方法是将 formGroup 作为自定义输入组件的父级。然后，从这个组件中，您可以将控件（验证器）和 formControlName（值）绑定到输入标签。

通常情况下，例子自己说得更多。

表单组件ts

// Reactive Forms
form: FormGroup;    

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
  // Form structure and validators
  this.form = this.formBuilder.group({
    'user' : this.formBuilder.group({
      'username' : ['', Validators.required],
      'email' : ['', [Validators.required, Validators.email]]
    }),
    'identity' : this.formBuilder.group({
      'firstname' : ['', Validators.required],
      'lastname'  : ['', Validators.required],
      'address' : this.formBuilder.group({
        'street' : ['', Validators.required],
        'city'  : ['', Validators.required],
      })
    })
  });        
}

onSubmit() {
    // Get object with same structure as form but only with values
    console.log(this.form.value);
    alert('Form is ' + (this.form.invalid ? 'invalid' : 'valid'));
}

表单组件html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <form-text [formGroupParent]="form.get(['user'])"
               [formGroupControlName]="'username'">
    </form-text>
    <form-text [formGroupParent]="form.get(['user'])"
               [formGroupControlName]="'email'">
    </form-text>
    <hr>
    <form-text [formGroupParent]="form.get(['identity'])"
               [formGroupControlName]="'firstname'">
    </form-text>
    <form-text [formGroupParent]="form.get(['identity'])"
               [formGroupControlName]="'lastname'">
    </form-text>
    <hr>
    <form-text [formGroupParent]="form.get(['identity','address'])"
               [formGroupControlName]="'street'">
    </form-text>
    <form-text [formGroupParent]="form.get(['identity','address'])"
               [formGroupControlName]="'city'">
    </form-text>
    <button type="submit">Submit</button>
</form>

自定义输入组件 ts（表单-文本）

// Needed to bind formControlName
@Input() formGroupParent: FormGroup;
@Input() formGroupControlName: string;
// FormControl store validators
control: FormControl;

ngOnInit() {
    // Fetch Form control (validator) from FormGroup parent
    this.control = <FormControl>this.formGroupParent.get(this.formGroupControlName);
}

自定义输入组件 html（表单-文本）

<ng-container [formGroup]="formGroupParent">
  <label>{{formGroupControlName}}</label> 
  <input type="text" formControlName="{{formGroupControlName}}">
</ng-container>