Angular2 Dynamically duplicate input fields

Question

In this tutorial under the "Dynamically Duplicate Input Elements" Module, In the video #3. She demonstrates how to hide controls with a checkbox. When she clicks on "Send Catalog" is when the Address appears. That's how she hides and shows the address block. She has the [(ngModel)] outside the formarray hence its doing the hide and show toggle thing correctly. The problem I have is that I have to do the toggle affect inside the address block. Lets say when I check the "Work" radio button it only have to display City and State, but when I click the Home it should give me full address. I am trying to achieve some similar affect as the above example I have stated.

The problem I get with it is when I use the [(ngModel)] and *ngif to get the hide/show affect inside the FormArray. When I choose a an option in the DDL It is duplicating exact same thing in all the following blocks of the formgroup. I am not sure how to fix this. Did any of you had the similar problem and were able to fix it? Do you know how I can do the Hide/Show toggle affect without using ([ngModel])?? I have attached an image if you want to see what I was talking about. Thanks in advance!!

component.html

 
                
                    
                        Discipline
                        
                            
                                
                                Fire
                            
                        
                        
                            
                                
                                Medical
                            
                        
                        
                            
                                
                                Police
                            
                        
                    

                    
                        
                            
                                Contract Terms
                                
                                    
                                
                            
                        
                        
                            
                                
                                    First EndDate*

                                    
                                        
                                        
                                    
                                    Second EndDate*

                                    
                                        
                                        
                                    
                                
                            
                        
                        
                            
                                
                                    Start Date*

                                    
                                        
                                        
                                    
                                    End Date*

                                    
                                        
                                        
                                    
                                
                            
                        
                        
                            
                                Renewal Date*

                                
                                    
                                    
                                
                                FollowUp Date*

                                
                                    
                                    
                                
                                CheckList Date Sent

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 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 In the above image I have select Fire for the 1st block and clicked "Add Discipline". The same selection has been done to the next block automatically! Let me know if you have any more questions

DeborahK · Accepted Answer

When using reactive forms, this line:

formControlName="Medical"

is binding this input element to the control in the Form model. Since all of the copies of this input element have the same formControlName they are all updating when you update one.

Try modifying the formControlName using the same technique you use for your id property:

formControlName={{Medical+ i}}

So they each have a unique name.

Let me know if that works for you.

Angular2 Dynamically duplicate input fields

Answers (1)

Related Questions