Angular 2 Reactive Form - 重用单个表单控件

Question

在我的 Angular 应用程序中，我有一个复杂的实体，可以通过多种方式创建：手动、上传 json 文件、从另一个 url 导入等。

对于上述每种情况，我在单独的组件中使用Reactive Forms构建了一个单独的表单。

所有其他表单字段都不同，除了名为name 的属性字段。

name 属性附加的 formControl 具有以下定义：

name: new FormControl(this.initialValue, [
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10)
      ])

现在，我不喜欢在每个反应式表单构造函数上重复相同的表单控件定义，正如我之前所说，它们位于单独的组件中。

这里有一些代码sn-ps：

this.formA = new FormGroup({
      name: new FormControl(this.initialValue, [
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10)
      ]),
      fooControl1: new FormControl(''),
      fooControl2: new FormControl('')
    });

this.formB = new FormGroup({
      name: new FormControl(this.initialValue, [
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10)
      ]),
      barControl: new FormControl('')
    });

我已经构建了一个简单的 Stackblitz 示例：https://stackblitz.com/edit/angular-tyjnlq。 （为简化起见，示例中的表单位于同一组件中）

问题： 如何保存此表单控件并将其包含在每个表单中？

Answer 1

如何将控件的表单定义存储在服务中，该服务使用表单构建器将控件添加到组中，例如dynamically addControl to formgroup Angular 5

Answer 2

要构建可重用的表单，我们必须使用 ControlValueAccessor API。

CVA 是什么？

根据 Angular 文档，ControlValueAccessor 定义了一个接口，充当 Angular 表单之间的桥梁 API 和 DOM 中的原生元素。

@Component({
  selector: "app-nameform",
  templateUrl: "./nameform.component.html",
  styleUrls: ["./nameform.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: NameformComponent,
      multi: true
    },
     {
      provide: NG_VALIDATORS,
      useExisting: NameformComponent,
      multi: true
    }
  ]
})
export class NameformComponent implements OnInit, ControlValueAccessor {
  form: FormGroup;
  onTouched: any;
  onChange:any;
  constructor() {
    this.form = new FormGroup({
      name: new FormControl("", [
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(10)
      ])
    });
    this.form.valueChanges.subscribe(value=>{
      this.onChange(value);
      this.onTouched();
    })
  }

  ngOnInit() {}
  writeValue(value: any) {
   value && this.form.setValue(value, {emitEvent:false});
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }
    get controls() {
    return this.form.controls;
  }

  validate(control:AbstractControl){
    return this.form.valid;
  }
}

Example

For Detailed explanationCheck this Blog