Angular2动态复制输入字段

Question

在本教程的“动态重复输入元素”模块下，在视频＃3中。她演示了如何使用复选框隐藏控件。当她点击“发送目录”时，就会显示地址。这就是她隐藏并显示地址块的方式。她在formarray之外有[（ngModel）]因此它正在隐藏并正确显示切换事物。我遇到的问题是我必须在地址块内进行切换影响。让我们说当我检查“工作”单选按钮时，它只需要显示城市和州，但是当我点击它时它应该给我完整的地址。我试图实现一些类似的影响，如上所述。

我遇到的问题是当我使用[（ngModel）]和* ngif来获取FormArray中的hide / show效果时。当我在DDL中选择一个选项时它在formgroup的所有以下块中重复完全相同的东西。我不知道如何解决这个问题。你们有没有遇到过类似的问题并且能够修复它吗？你知道如何在不使用（[ngModel]）的情况下进行隐藏/显示切换效果吗？如果你想看看我在说什么，我附上了一张图片。在此先感谢!!

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 在上面的图像中，我为第一个块选择了Fire，然后单击“Add Discipline”。自动完成了对下一个程序段的相同选择！如果您还有其他问题，请与我们联系

Answer 1

使用反应形式时，此行：

formControlName="Medical"

将此输入元素绑定到Form模型中的控件。由于此输入元素的所有副本都具有相同 formControlName，因此更新它们时它们都会更新。

尝试使用您用于formControlName属性的相同技术修改id：

formControlName={{Medical+ i}}

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

请告诉我这是否适合您。