0
在本教程的“动态重复输入元素”模块下，在视频＃3中。她演示了如何使用复选框隐藏控件。当她点击“发送目录”时出现地址。这就是她隐藏和显示地址块的方式。她在formarray之外有[（ngModel）]，因此它正确地执行隐藏和显示切换。我遇到的问题是我必须在地址块内执行切换影响。比方说，当我检查“工作”单选按钮时，它只需要显示城市和州，但是当我点击家时，它应该给我完整的地址。我试图达到一些与上述例子相似的效果。Angular2动态重复输入字段
我得到的问题是当我使用[（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 在上图中我选择火1号地块，并点击 “添加纪律”。自动对下一个块进行同样的选择！让我知道，如果你有任何问题
谢谢Deborah的回复。我想我应该添加一个索引到formgroup块并每次增加，这样它就不会每次都引用同一个块。感谢您的意见。 – user1704842