Angular2 动态复制输入字段

Question

在本教程的 "Dynamically Duplicate Input Elements" 模块下，在视频 #3 中。她演示了如何使用复选框隐藏控件。当她点击 "Send Catalog" 时，地址就会出现。这就是她隐藏和显示地址块的方式。她在 formarray 之外有 [(ngModel)]，因此它可以正确地执行隐藏和显示切换操作。我遇到的问题是我必须在地址块内执行切换影响。可以说当我选中 "Work" 单选按钮时它只需要显示城市和州，但是当我单击主页时它应该给我完整的地址。我正在尝试实现与我上面所述的示例类似的效果。

我遇到的问题是当我使用 [(ngModel)] 和 *ngif 来获得 FormArray 内部的 hide/show 影响时。当我在 DDL 中选择一个选项时，它会在表单组的所有以下块中复制完全相同的内容。我不确定如何解决这个问题。你们中有人遇到过类似的问题并且能够解决吗？你知道我如何在不使用 ([ngModel]) 的情况下实现 Hide/Show 切换效果吗？如果你想看看我在说什么，我附上了一张图片。提前致谢！！

component.html

 <div formArrayName="Disciplines" *ngFor="let discipline of Disciplines.controls; let i=index">
                <div [formGroupName]="i">
                    <div class="form-group">
                        <label class="col-md-2 control-label">Discipline</label>
                        <div class="col-md-3">
                            <label class="control-label" id="fireId" name="agencyProfile-label-fireId" attr.for="{{fireId + i}}">
                                <input id="{{fireId + i}}" name="Fire"
                                       type="checkbox" formControlName="Fire">
                                Fire
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label" id="medicalId" name="agencyProfile-label-medicalId" attr.for="{{medicalId + i}}">
                                <input id="{{medicalId + i}}" name="Medical"
                                       type="checkbox" formControlName="Medical">
                                Medical
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label" id="policeId" name="agencyProfile-label-policeId" attr.for="{{policeId + i}}">
                                <input id="{{policeId + i}}" name="Police"
                                       type="checkbox" formControlName="Police">
                                Police
                            </label>
                        </div>
                    </div>

                    <!--<div *ngIf="agency.Fire || agency.Medical || agency.Police">-->
                        <div class="form-group">
                            <div class="col-md-12">
                                <label class="col-md-2 control-label" id="contractTermsId" name="agencyProfile-label-contractTermsId" attr.for="{{contractTermsId + i}}">Contract Terms</label>
                                <div class="col-md-6">
                                    <select class="form-control" id="{{contractTermsId + i}}" name="agencyProfile-drodown-contractTermsId" formControlName="ContractTermId" [(ngModel)]="agency.ContractTerms">
                                        <option *ngFor="let d of contract" [value]="d.ContractTermId">{{d.ContractTerms}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="agency.ContractTerms == 1">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <label class="col-md-2 control-label" attr.for="{{FirstEndDateId + i}}" id="FirstEndDateId" name="agencyProfile-label-FirstEndDate">First EndDate<span class="compulsary">*</span></label><br>
                                    <div class="col-md-4">
                                        <input type="date" id="{{FirstEndDateId + i}}" formControlName="FirstEndDate" />
                                        <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                            formControlName="RenewalDate"></my-date-picker>-->
                                    </div>
                                    <label class="col-md-1 control-label" attr.for="{{secondEndDateId + i}}" id="secondEndDateId" name="agencyProfile-label-secondEndDateId">Second EndDate<span class="compulsary">*</span></label><br>
                                    <div class="col-md-4">
                                        <input type="date" id="{{secondEndDateId + i}}" formControlName="SecondEndDate" />
                                        <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                            formControlName="RenewalDate"></my-date-picker>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="agency.ContractTerms == 2">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <label class="col-md-2 control-label" attr.for="{{startDateId + i}}" id="startDateId" name="agencyProfile-label-startDateId">Start Date<span class="compulsary">*</span></label><br>
                                    <div class="col-md-4">
                                        <input type="date" id="{{startDateId + i}}" formControlName="StartDate" />
                                        <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                            formControlName="RenewalDate"></my-date-picker>-->
                                    </div>
                                    <label class="col-md-1 control-label" attr.for="{{endDateId + i}}" id="endDateId" name="agencyProfile-label-endDateId">End Date<span class="compulsary">*</span></label><br>
                                    <div class="col-md-4">
                                        <input type="date" id="{{endDateId + i}}" formControlName="EndDate" />
                                        <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                            formControlName="RenewalDate"></my-date-picker>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <label class="col-md-2 control-label" attr.for="{{renewalDateId + i}}" id="renewalDateId" name="agencyProfile-label-renewalDateId">Renewal Date<span class="compulsary">*</span></label><br>
                                <div class="col-md-2">
                                    <input type="date" id="{{renewalDateId + i}}" formControlName="RenewalDate" />
                                    <!--<my-date-picker id="renewalDateTextId" name="agencyProfile-datepicker-renewalDateTextId" [options]="myDatePickerOptions"
                        formControlName="RenewalDate"></my-date-picker>-->
                                </div>
                                <label class="col-md-1 control-label" attr.for="{{followupDateId + i}}">FollowUp Date<span class="compulsary">*</span></label><br>
                                <div class="col-md-2 ">
                                    <input type="date" id="{{followupDateId + i}}" formControlName="FollowupDate" />
                                    <!--<my-date-picker name="followupDate" [options]="myDatePickerOptions"
                        formControlName="FollowupDate"></my-date-picker>-->
                                </div>
                                <label class="col-md-1 control-label" attr.for="{{checklistDateSentId + i}}">CheckList Date Sent</label><br>
                                <div class="col-md-2">
                                    <input type="date" id="{{checklistDateSentId + i}}" formControlName="CheckListDateSent" />
                                    <!--<my-date-picker name="primerDate" [options]="myDatePickerOptions"
                        formControlName="PrimerDate"></my-date-picker>-->
                                </div>
                            </div>
                        </div>
                    <!--</div>-->
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-2">
                    <button class="col-md-12 btn btn-primary"
                            name="agencyProfileTab-button-searchUserProfileId"
                            (click)="addDisciplines()"
                            type="button">
                        Add Discipline
                    </button>
                </div>
            </div>

component.ts

import { Component, OnInit, AfterViewInit, OnDestroy, ViewChildren, ElementRef} from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray, Validators, FormControlName } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/merge';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { IAgencyStatus } from './iagencystatus';
@Component({
    moduleId: module.id,
    templateUrl: 'agencyprofile.component.html'
})

export class AgencyProfileComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChildren(FormControlName, { read: ElementRef }) formInputElements: ElementRef[];

        agency: IAgencyProfile;

    get Disciplines(): FormArray {
            return <FormArray>this.agencyForm.get('Disciplines');
        }
     ngOnInit(): void {
            this.Form = this.fb.group({
                Disciplines: this.fb.array([this.buildDisciplines()]),
    }

     addDisciplines(): void {
            this.Disciplines.push(this.buildDisciplines());
        }
     buildDisciplines(): FormGroup {
            return this.fb.group({
                ContractTerms: '',
                ContractTermId: 0,
                StartDate: null,
                EndDate: null,
                FirstEndDate: null,
                SecondEndDate: null,
                Fire: false,
                Medical: false,
                Police: false,
                FollowupDate: null,
                RenewalDate: null,
                CheckListDateSent: null
            });
        }

Picture for the above html form 在上图中，我为第一个块设置了 select Fire 并单击了 "Add Discipline"。相同的 selection 已自动完成到下一个块！如果您还有其他问题，请告诉我

Answer 1

使用响应式表单时，此行：

formControlName="Medical"

正在将此输入元素绑定到表单模型中的控件。由于此输入元素的所有副本都具有相同 formControlName 当您更新一个时，它们都会更新。

尝试使用与 id 相同的技术修改 formControlName 属性:

formControlName={{Medical+ i}}

所以他们每个人都有一个独特的名字。

让我知道这是否适合你。

Angular2 动态复制输入字段

Angular2 Dynamically duplicate input fields

angular

angular-reactive-forms