Angular 10：如何将 Formarray 子项插入到 Formgroup 父项中

问题描述

我正在尝试实现响应式和可重用的表单，但我有一个问题：我需要将子组件的 Formarray 插入到父组件的 Formgroup 中， 我按照这个指南来执行过程https://coryrylan.com/blog/building-reusable-forms-in-angular，这是我的 ChildComponent.ts

export interface ReferenciaDocumentosFormValues {
  numero: string;
  uuid: string;
  tipo: string;
  fecha: string;
}

@Component({
  selector: 'app-referencia-documentos-form',templateUrl: './referencia-documentos-form.component.html',styleUrls: ['./referencia-documentos-form.component.css'],providers: [
    {
      provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => ReferenciaDocumentosFormComponent),multi: true
    },{
      provide: NG_VALIDATORS,multi: true
    }
  ]
})
export class ReferenciaDocumentosFormComponent implements OnInit,OnDestroy {

  referenciaDocumentosForm: FormGroup;
  subscriptions: Subscription[] = [];

  get value(): ReferenciaDocumentosFormValues[] {
    return this.referenciaDocumentos.value;
  }

  get referenciaDocumentos(){
    return this.referenciaDocumentosForm.get('referenciaDocumentos') as FormArray;
  }

  set value( value ){

    this.referenciaDocumentos.setValue(value);
    this.onChage(value);
    this.onTouched();
  }

  constructor( private fb: FormBuilder ) { }

  ngOnDestroy(): void {
    this.subscriptions.forEach( s => s.unsubscribe());
  }

  ngOnInit(): void {
    this.createReferenciaDocumentosForm();

    this.subscriptions.push(
      this.referenciaDocumentosForm.valueChanges.subscribe( value => {
        this.onChage(value);
        this.onTouched();
        console.log(this.referenciaDocumentosForm.value);
      })
    )

    console.log(this.referenciaDocumentos);

  }

  onChage: any = () => {};
  onTouched: any = () => {};

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

  writeValue(value): void {
    if (value) {
      this.value = value;
    }

    if (value === null) {
      this.referenciaDocumentos.reset();
    }

  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  validate(_: FormControl){
    return this.referenciaDocumentosForm.valid ? null : { adquiriente: { valid: false } };
  }

  createReferenciaDocumentosForm(){

    this.referenciaDocumentosForm = this.fb.group({

      referenciaDocumentos: this.fb.array([
        this.fb.group({
          numero: ['',Validators.required],uuid: ['',tipodocumento: ['',fecha: ['',}),]),})
  }

  getControl ( c: string,i: number ): AbstractControl{
    return this.referenciaDocumentos.at(i).get(c);
  }

  addNewReferencia(){
    this.referenciaDocumentos.push(this.fb.group({
      numero: ['',}));
  }

}

这是我的 parentComponent.ts

@Component({
  selector: 'app-formulario-factura',templateUrl: './formulario-factura.component.html',styleUrls: ['./formulario-factura.component.css']
})
export class FormularioFacturaComponent implements OnInit {

  mainForm: FormGroup;

  constructor( private fb: FormBuilder ) { }

  get referenciaDocumentos(){
    return this.mainForm.get('referenciaDocumentos') as FormArray;
  }

  ngOnInit(): void {
    this.createForm();
  }

  createForm(){
    this.mainForm = this.fb.group({
      adquiriente: [],referenciaDocumentos: []
    })
  }


}

...我需要这样的 FormGroup 对象

{
  "adquiriente": { null },"referenciaDocumentos": [
      {
        "numero": "123","uuid": null,"tipodocumento": null,"fecha": null
      }
    ]
  }
}

但它看起来像这样

{
  "adquiriente": { null },"referenciaDocumentos": {
    "referenciaDocumentos": [
      {
        "numero": "123","fecha": null
      }
    ]
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）