Глубоко вложенные угловые реактивные формы с вложенным компонентом, не передающие внутреннюю форму внешней форме - PullRequest
Новая
       28

Глубоко вложенные угловые реактивные формы с вложенным компонентом, не передающие внутреннюю форму внешней форме

0 голосов
/ 30 сентября 2019

Это моя структура приложения 

<form [formGroup]="ProjectForm" (ngSubmit)="OnSubmitProject()">
<div class="row" formArrayName="ProjectItemList" *ngFor="let item of ProjectForm.get('ProjectItemList')['controls'];let i=index" >

            <app-saleitem *ngIf='item.controls.ItemType.value === 1' [formgroup]= "item" [itemtype] ="item.controls.ItemType.value"  [ItemID]="item.controls.ItemID.value" [index]="i" [ProjectID]='ProjectID' style="width: 100%"> </app-saleitem>

</div>
</form>

, и это внутри товара продажи 

<div class="example-card" [formGroup]="formgroup">

    <mat-accordion>
           <div class="row" formArrayName="pricevariantlist" *ngFor="let item of pricevariantlist['controls'];let i=index"  >


                      <app-pricevariant  [formgroup]="formgroup" ></app-pricevariant>

                  </div>




    </mat-accordion>
 </div>

это внутри варианта цены 

    <mat-expansion-panel style="margin-bottom:1px;" [formGroup]="formgroup">
            <mat-expansion-panel-header>
                    <mat-panel-title>
                            Price Variant
                    </mat-panel-title>
                    <mat-panel-description>
                            ........
                    </mat-panel-description>
            </mat-expansion-panel-header>


            <div class="row rowspace">

                            <div class="col-md-12">
                                    <ul class="list-group"
                                            style="width: 100%;">
                                            <li
                                                    class="list-group-item bg-light">
                                                    Variant Pictures
                                                    <input type="checkbox" #VariantPictures 
                                                            class="btn btn-primary"
                                                            style="float: right">
                                            </li>
                                            <li class="list-group-item" *ngIf="VariantPictures">
                                                   <div class="row">
                                                            <div class="col-md-2"></div>
                                                            <div class="col-md-8">
                                                                            <!-- <app-itemimageuploader [ProjectID] = 'ProjectID' [ItemID]= 'ItemID' [ImageUploaderType]= '3' [VariantID]= 'item.VariantID'></app-itemimageuploader> -->
                                                            </div>
                                                            <div class="col-md-2"></div>
                                                   </div>


                                            </li>
                                    </ul>
                            </div>

                    </div>

            <div class="row rowspace">
                    <div class="col-md-6">

                            <span class="form-control" style="border: none;" >Variant Name</span>
                    </div>

                    <div class="col-md-6">
                            <input type="text" class="form-control"  formControlName="PriceVariantName">
                    </div>
            </div>

            <div class="row rowspace">
                    <div class="col-md-6">

                            <span class="form-control" style="border: none;">Copy From</span>
                    </div>

                    <div class="col-md-6">
                            <ng-select bindLabel="description" bindValue="id" >
                            </ng-select>
                    </div>
            </div>

            <div class="row rowspace">
                    <div class="col-md-6">

                            <span class="form-control" style="border: none;">Price </span>
                    </div>

                    <div class="col-md-6">
                            <input type="text" class="form-control" formControlName="Price" >
                    </div>
            </div>

            <div class="row rowspace">
                    <div class="col-md-6">
                            <span class="form-control" style="border: none;">Weight </span>
                    </div>

                    <div class="col-md-2">
                            <ng-select bindLabel="description" formControlName="WeightUnit" >
                            </ng-select>
                    </div>
                    <div class="col-md-2">
                            <input type="text" class="form-control" formControlName="WeightMajor">
                    </div>
                    <div class="col-md-2">
                            <input type="text" class="form-control" formControlName="WeightFraction">
                    </div>
            </div>


            <div class="row rowspace">
                    <div class="col-md-6">

                            <span class="form-control" style="border: none;">Quantity</span>
                    </div>

                    <div class="col-md-6">
                            <input type="text" class="form-control" formControlName="AvailableQuantity" >
                    </div>
            </div>






            <div class="row rowspace">
                    <div class="col-md-4">
                            <button class="btn btn-outline-primary" style="width: 100%">
                                    Save</button>
                    </div>
                    <div class="col-md-4">
                            <button class="btn btn-outline-warning" style="width: 100%" > Disable
                            </button>
                    </div>

                    <div class="col-md-4">
                            <button class="btn btn-outline-danger" style="width: 100%" >
                                    Remove</button>
                    </div>
            </div>

    </mat-expansion-panel>

этоструктура моей окончательной формы 

ProjectForm:FormGroup = new FormGroup(
                                      {
                                        ProjectTitle: new FormControl(),
                                        ProjectCoverPicture: new FormControl(),
                                        ProjectItemList : new FormArray([]),


                                      }
                                   );

Метод добавления элементов 

(<FormArray>this.ProjectForm.get("ProjectItemList")).push(
                                                              this.formbuilder.group({
                                                                                        ItemID :[itemid],
                                                                                        ItemType :[itemtype],
                                                                                        ProjectID : [this.ProjectID],
                                                                                        ItemTitle : [""],
                                                                                        ItemDescription :[""],
                                                                                        PriceVariant :[]
                                                                                    })
                                                            );

Сообщения об ошибках, которые я получаю 

ERROR Error: Cannot find control with name: 'PriceVariantName'
ERROR Error: Cannot find control with name: 'Price'
Error: Cannot find control with name: 'WeightUnit'

и так далее ... !

Каково мое последнее ожидание - заполнить эту форму значениями вариантов цены 

ProjectCoverPicture: null
ProjectDescription: null
ProjectItemList: Array(1)
0:
ItemDescription: ""
ItemID: "2a554a51-224c-f986-8570-e6cb957b9e75"
ItemTitle: ""
ItemType: 1
PriceVariant: null
ProjectID: "4529243a-8e2f-5ebb-f6ca-d50b77ccca75"

, но независимо от того, что я делаю, вариант цены не может получить значения. Что касается моего понимания, это 3-й слой формы, который я хотел добавить (компонент внутри компонента внутри компонента), поэтому я не понимаю, возможно ли это с помощью этого подхода. до сих пор я связываю с двумя слоями в этой структуре, и она работает нормально. Единственная проблема, с которой я сталкиваюсь сейчас, это привязка деталей варианта цены к интерфейсу и форме. Цени любую помощь

...