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

Question

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

对于上面描述的每一种情况，我都建立了一个单独的反应式表单，在不同的组件中：所有的表单字段都是不同的，除了实体的字段之外。name.

它的定义如下。

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

现在，我不喜欢我必须在每一个反应式表单构造函数上 为这个表单控件重复相同的定义，这些函数都在 分体.

我已经建立了一个简单的Stackblitz例子。https:/stackblitz.comeditangular-tyjnlq。. (为简化起见，在例子中，表格是在同一个部分)

我如何保存这个表单控件并将其包含在每个表单中？

Answer 1

要建立可重用的表单，我们必须使用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;
  }
}

例子

详细说明请看这个博客

Answer 2

将控件的表单定义存储在一个服务中，通过表单生成器将控件添加到组中，就像这样。动态添加控件到形式组Angular 5