Вложенный пользовательский компонент FormArray не связывается с дочерней формой с FormArrayName

Вам необходимо передать обновленные данные формы из дочернего компонента в родительский компонент. Я использовал метод this.form.valueChanges() для обнаружения изменений, а затем передал значение формы родительскому компоненту.

Parent Component:

HTML-код:

<app-cva-form-array formArrayName = "routes" (onChildFormValueChange) = "onFormChange($event)"></app-cva-form-array>

Код ТС:

public onFormChange(form): void {
    this.requestForm = form;
}

Child Component:

HTML-код:

No change:)

Код ТС:

@Output() onChildFormValueChange: EventEmitter<any> = new EventEmitter<any>();

registerEvent() {
    this.form.valueChanges.subscribe(() => {
      this.onFormValueChange()
    });
}

public onFormValueChange(): void {
    this.onChildFormValueChange.emit(this.form);
}

и вызовите метод registerEvent в конструкторе, например:

constructor(){
  this.registerEvent();
}

Working_Stackblitz

Я считаю, что проблема здесь в том, что formArrayName не является входом для NG_VALUE_ACCESSOR/DefaultValueAccessor.

Также обратите внимание:

Her examples are static parent->multiple children... meaning 1 to many and not dynamic. You are attempting static parent to many dynamic child->grandChild relationships built from formArray, then trying to dynamically link grandChild form to parent formArrayIndex that was passed through the child to the grandChild. Your stackblitz deviates from the structure she is teaching, and certainly introduces some new challenges not covered in the lecture.

Изучение того, как перебирать FormArray на уровне parent и создавать экземпляры отношений child->grandchild внутри этого цикла, может быть возможным решением, таким образом, вы не передаете весь массив вниз, а только formGroup, который будет применяться.

<h1>MAIN FORM</h1>
    {{ requestForm.value | json }}
    <div *ngFor = "let route of requestForm.get('routes').controls">
        <app-cva-form-array formControl = "route" (onChildFormValueChange) = "onFormChange($event)"></app-cva-form-array>
    </div>

Селекторы

• Вход: не ([тип = флажок]) [имяКонтроляФормы]
• текстовая область[имяКонтроляФормы]
• Вход: не ([тип = флажок]) [формаКонтроль]
• текстовая область [форма управления]
• Вход: не ([тип = флажок]) [нгМодель]
• текстовая область [ngModel]
• [ngDefaultControl]

https://angular.io/api/forms/DefaultValueAccessor#selectors

Единственными вариантами ввода являются formControlName, formControl, ngModel и ngDefaultControl...

This is the reason formArrayName will not work in main-form <--> cva-form-array however, formControlwill work for child-child to child level, as you are passing a singular formControl into your app-cva-form, from your app-cva-form-array via the *ngFor loop.

<mat-card *ngFor = "let route of getForm.controls;
   <app-cva-form [formControl] = "route" (blur) = "onTouched()"></app-cva-form>

Я считаю, что ключ к пониманию здесь заключается в том, что formArray — это всего лишь организационный контейнер для своих дочерних элементов... он не будет делать то, что вы хотите, в этом сценарии без помощи дополнительной логики.

There currently doesn't appear to be the necessary functionality to accept formArray as an input, iterate/dynamically manage the array, and link changes back to the parent formArray.

Когда вы используете «настраиваемый элемент управления формой», вам необходимо учитывать, что вы загружаете элемент управления формой cursom с помощью элемента управления формы (не FormArray, не FormGroup). FormControl имеет в качестве значения массив или объект, но вам не нужно смущаться по этому поводу. (*)

Посмотреть в работе можно в стекблиц

Это твоя форма, как

//in main.form
this.requestForm = new FormGroup({
  garageId: new FormControl(0),
  routes: new FormControl(routes), //<--routes will be an array of object
  endDateTime: new FormControl(0)
})

//in cva-form-array
this.form=new FormArray([new FormControl(...)]); //<-this.form is a 
                             //formArray of FormControls NOT of formGroup

//finally in your cva-form
this.form=new FormGroup({});
this.form=formGroup({
      addressPointId: new FormControl(),
      municipalityId: new FormControl(),
      ...
})

Я создал константу для экспорта просто в код. МОЙ постоянный экспорт

export const dataI = {
  addressPointId: "",
  municipalityId: "",
  regionId: "",
  rvId: "",
  sequenceNumber: "",
  settlementId: "",
  regionName: "",
  municipalityName: "",
  settlementName: "",
  description: "",
}

Итак, в mainForm у нас есть

  ngOnInit() {
    let routes:any[]=[];
    routes.push({...dataI});
    this.requestForm = new FormGroup({
      garageId: new FormControl(0),
      routes: new FormControl(routes),
      endDateTime: new FormControl(0)
    })
  }
<mat-card [formGroup] = "requestForm" style = "background: #8E8D8A">
    <app-cva-form-array formControlName = "routes"></app-cva-form-array>
</mat-card>

В массиве cvc-form создайте formArray, когда мы дадим значение

  writeValue(v: any) {
    this.form=new FormArray([]);
    for (let value of v)
        this.form.push(new FormControl(value))

    this.form.valueChanges.subscribe(res=>
    {
      if (this.onChange)
        this.onChange(this.form.value)
    })
  }

    <form [formGroup] = "form" >
        <mat-card *ngFor = "let route of form.controls; 
            let routeIndex = index; let routeLast = last;">
           <button (click) = "deleteRoute(routeIndex)">
             cancel
           </button>
           <app-cva-form [formControl] = "route" (blur) = "onTouched()"></app-cva-form>
      </form>

Наконец, cva-форма

  writeValue(v: any) {
    this.form=new FormGroup({});
    Object.keys(dataI).forEach(x=>{
      this.form.addControl(x,new FormControl())
    })

    this.form.setValue(v, { emitEvent: false });
    this.form.valueChanges.subscribe(res=>{
       if (this.onChanged)
        this.onChanged(this.form.value)
    })
  }

<div [formGroup] = "form">
  <mat-form-field class = "locationDate">
    <input formControlName = "regionName">
    <mat-autocomplete #region = "matAutocomplete" 
      (optionSelected) = "selectedLocation($event)">
      <mat-option *ngFor = "let region of regions" 
      [value] = "region">
        {{region.regionName}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class = "locationDate">
    <input formControlName = "municipalityName" 
      [matAutocomplete] = "municipality"
      (blur) = "onTouched()"
      [readonly] = "checked || this.form.value.regionId < 1">
   ....
   </form>

(*) Да, мы привыкли видеть, что FormControl имеет в качестве значения строку или число, но никто не запрещает нам, чтобы значение было объектом или массивом (например, ng-bootstrap DatePicker хранит объект {year : .. месяц: .., день ..}, mat-multiselect хранит массив, ...)

Обновлять Конечно, мы можем передать нашему элементу управления данные из службы или чего-то подобного. Единственное, что мы должны учитывать, это то, как мы предоставляем данные. Как обычно, мне нравится создавать функцию, которая получает данные или ноль и возвращает FormControl.

  getForm(data: any): FormGroup {
    data = data || {} as IData;
    return new FormGroup({
      garageId: new FormControl(data.garageId),
      routes: new FormControl(data.routes),
      endDateTime: new FormControl(data.endDateTime)
    })
  }

где IData — это интерфейс

export interface IData {
  garageId: number;
  routes: IDetail[];
  endDateTime: any
}

и IDetail другой интерфейс

export interface IDetail {
  addressPointId: string;
  ...
  description: string;
}

Тогда у нас могут быть сложные данные, например (извините за большой объект)

let data = {
  garageId: 1,
  routes: [{
    addressPointId: "adress",
    municipalityId: "municipallyty",
    regionId: "regionId",
    rvId: "rvId",
    sequenceNumber: "sequenceNumber",
    settlementId: "settlementId",
    regionName: "regionName",
    municipalityName: "municipalityName",
    settlementName: "settlementName",
    description: "description",
  },
  {
    addressPointId: "another adress",
    municipalityId: "another municipallyty",
    regionId: "another regionId",
    rvId: "another rvId",
    sequenceNumber: "another sequenceNumber",
    settlementId: "another settlementId",
    regionName: "another regionName",
    municipalityName: "another municipalityName",
    settlementName: "another settlementName",
    description: "another description",
  }],
  endDateTime: new Date()
}

Тогда только нужно сделать

this.requestForm = this.getForm(data);

Stackblitz, если он обновлен