创建 Angular 表单副本 - 表单数组

问题描述

我正在制作一个巫师，以便填写狗的信息。我正在使用反应形式。狗具有一些属性，例如作为基本输入的名称，有些是复选框，有些是数组，例如过敏症。
问题是我希望能够最初询问他他拥有的狗的数量，并以此为基础，例如，如果他说 2；提出的每个问题都会显示两次，我将填写 2 个对象的信息。
我正在尝试实现的一个非常相似的示例如下：https://butternutbox.com/wizard/new 点击“我有另一只狗”按钮。
这是代码片段，您可以在以下 stackblitz 链接中找到完整的工作：https://stackblitz.com/edit/angular-xndqqj?embed=1&file=src/app/app.component.html
HTML

<video
    src="preSignedUrlCanGoHere"
    preload="Metadata"
    controls
    controlsList="nodownload">
</video>

TS

<div class="row">
    <div class="col-sm-12">
        <app-card cardTitle="Signup Wizard" [options]="false">
            <form [formGroup]="addCusForm">
                <aw-wizard #wizard class="arc-wizard">
                    <!-- NAME -->
                    <aw-wizard-step stepTitle="1">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>What's your dog's name?</h5>
                                <hr>
                                <h6>My dog is called</h6>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Your Dog's name"
                                        formControlName="DOG_NAME">
                                </div>                                
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-primary btn-sm" awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>                   
                    
                    <!-- ALLERGIES -->
                    <aw-wizard-step stepTitle="10">
                        <div class="row">
                            <div class="col-sm-12" formArrayName="ALLERGIES_ARRAY">
                                <h5>Does {{addCusForm.get('DOG_NAME').value}} have any allergies?</h5>
                                <hr>
                                <h6>{{addCusForm.get('DOG_NAME').value}} is allergic to...</h6>
                                <div class="custom-control custom-checkBox">
                                    <input type="checkBox" class="custom-control-input" (change)="unCheckAll()"
                                        [checked]="nthchecked">
                                    <label class="custom-control-label">nothing</label>
                                </div>
                                <div class="custom-control custom-checkBox"
                                    *ngFor="let allergy of addCusForm.get('ALLERGIES_ARRAY')['controls']; let i=index"
                                    [formGroupName]="i">
                                    <input type="checkBox" class="custom-control-input" formControlName="IS_SELECTED"
                                        (change)="onAllergyChange($event)">
                                    <label class="custom-control-label">{{allergy.get('ALLERGY_NAME').value}}</label>
                                </div>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-primary btn-sm" (click)="TestPrint()"
                                        awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>
                    <!-- HEALTH ISSUES -->
                    <aw-wizard-step stepTitle="11">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Does {{addCusForm.get('DOG_NAME').value}} have any Health issues</h5>
                                <hr>
                                <h6>{{addCusForm.get('DOG_NAME').value}} has ...</h6>
                                <!-- <div class="form-group">
                                    <input type="text" list="health_issues" placeholder="Select Health Issue"/>
                                    <datalist id="health_issues" >
                                        <option *ngFor="let hi of HEALTH_ISSUES" (change)='addHI(hi)'>{{hi.name}}
                                        </option>
                                    </datalist>
                                </div> -->
                                <div class="form-group">
                                    <select class="form-control" id="exampleFormControlSelect2"
                                        (change)="addHI($event.target.value)" formControlName="HI_INPUT">
                                        <option value="0" disabled selected>Select your option</option>
                                        <option *ngFor="let hi of HEALTH_ISSUES" [value]="hi.HI_ID" [hidden]="!hi.shown">{{hi.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger"
                                    *ngFor="let p of addCusForm.get('HI_ARRAY')['controls']; let i = index" (click)="DeleteHI(p,i)">
                                    {{p.value.HI_NAME}} <span class="badge badge-light">X</span></button>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-primary btn-sm" awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>
                    <!-- TREATS TYPE -->
                    <aw-wizard-step stepTitle="12">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Does {{addCusForm.get('DOG_NAME').value}} get any treats or snacks</h5>
                                <hr>
                                <h6>{{addCusForm.get('DOG_NAME').value}}...</h6>
                                <div class="custom-control custom-radio">
                                    <input type="radio" formControlName="TREATS_TYPE_CODE" value="001"
                                        class="custom-control-input">
                                    <label class="custom-control-label" for="customControlValidation2">Doesn't have
                                        any</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" formControlName="TREATS_TYPE_CODE" value="002"
                                        class="custom-control-input">
                                    <label class="custom-control-label" for="customControlValidation2">Has some</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" formControlName="TREATS_TYPE_CODE" value="003"
                                        class="custom-control-input">
                                    <label class="custom-control-label" for="customControlValidation2">Has lots</label>
                                </div>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-primary btn-sm" awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>
                    <!-- POSTCODE -->
                    <aw-wizard-step stepTitle="13">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Where should we deliver {{addCusForm.get('DOG_NAME').value}}'s food?</h5>
                                <hr>
                                <h6>{{addCusForm.get('DOG_NAME').value}} lives at...</h6>
                                <div class="form-group">
                                    <label>Your postcode</label>
                                    <input type="text" class="form-control" placeholder="ex: 1111 8888"
                                        formControlName="POSTCODE">
                                </div>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-primary btn-sm" awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>
                    <!-- OWNER NAME & EMAIL -->
                    <aw-wizard-step stepTitle="14">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Pup parent details</h5>
                                <hr>
                                <h6>Your Name</h6>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="mia Mcdoglover"
                                        formControlName="FULLNAME">
                                </div>
                                <h6 class="mt-3">Your Email</h6>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="[e-mail]"
                                        formControlName="EMAIL">
                                </div>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-primary btn-sm" (click)="PrintAllInfo()"
                                        awNextStep>Continue</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>

                    <aw-wizard-step stepTitle="Finished">
                        <div class="row">
                            <div class="col-sm-12">
                                <h5>Calculating Plan</h5>
                                <hr>
                                <h6>Sub title 1</h6>
                                <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the
                                    printing
                                    <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been
                                    the
                                    industry's
                                    standard dummy text.
                                </p>
                            </div>
                            <div class="col-sm-12 centered-content">
                                <div class="btn-group mt-10">
                                    <button type="button" class="btn btn-secondary btn-sm" awPrevIoUsstep>Back</button>
                                    <button type="button" class="btn btn-success btn-sm" awResetWizard>Finished</button>
                                </div>
                            </div>
                        </div>
                    </aw-wizard-step>
                </aw-wizard>
            </form>
        </app-card>
    </div>
</div>

解决方法

最终，我没有使用 formBuilder。我创建了一个叫做 DOG 的类，并初始化了这个类的一个数组。 OnInit 我会向数组添加一个 DOG 对象，每当用户希望输入额外的狗时，我也会推送新对象。每个问题都有一个 *ngFor="let dog of DOGS" 然后使用 [(ngModel)] 绑定值。我不知道这是否是唯一/最好的方法，或者 Reactive Forms 是否可行，但它确实成功了。