i am trying nested component in angular 2 where we add dynamically component on click multiple time but the problem is when we click on check box of second component it always trigger the first component checkbox..my code in html is follow how to solve the issue the other controls are work fine...
<div [formGroup]="itemForm" class="row order-persons-row">
<div class="small-12 columns">
<div class="order-item">
<div class="row order-persons-row align-stretch">
<div class="small-12 medium-6 columns">
<div class="order-item-col-top">
<div>Diagnosis (ICD10) *</div>
<div>
<select formControlName="icd9" name="icd9">
<option value="">Select Diagnosis</option>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<control-messages [control]="itemForm.controls.icd9" [name]="'Diagnosis'"></control-messages>
</div>
<div class="order-item-sep"></div>
<div>Item-HCPC *</div>
<div>
<select formControlName="hcpcs" name="hcpcs">
<option value="">Select Item-Hcpc</option>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<control-messages [control]="itemForm.controls.hcpcs" [name]="'Hcpc'"></control-messages>
</div>
</div>
</div>
<div class="small-12 medium-6 columns">
<div class="order-item-col-top">
<div>Justification</div>
<div><input type="text" formControlName="justification" name="justification" class="" placeholder="Justification"/></div>
<control-messages [control]="itemForm.controls.justification" [name]="'justification'"></control-messages>
<div class="order-item-sep"></div>
<div class="flex-container align-justify"><span>Quantity *</span></div>
<div class="flex-container align-justify"><input type="number" formControlName="quantityFrequence" class="" placeholder="Quantity"/></div>
<control-messages [control]="itemForm.controls.quantityFrequence" [name]="'Quantity'"></control-messages>
</div>
</div>
</div>
<div class="row order-persons-row align-stretch">
<div class="small-12 medium-6 columns">
<div class="order-item-col-bottom order-docs">
<div class="order-item-sep"></div>
<div class="flex-container align-justify">
<span>Prior authorization required?</span>
<span><div class="switch tiny">
<input class="switch-input" id="priorAuthRequired" formControlName="priorAuthRequired" type="checkbox" name="priorAuthRequired" checked>
<label class="switch-paddle" for="priorAuthRequired">
<span class="show-for-sr">Tiny Sandwiches Enabled</span>
</label>
</div>
</span>
</div>
<div class="flex-container align-justify">
<span>Beyond quantity limit?</span>
<span><div class="switch tiny">
<input class="switch-input" formControlName="beyondQtyLimit" id="beyondQtyLimit[]" type="checkbox" name="beyondQtyLimitName">
<label class="switch-paddle" for="beyondQtyLimit[]">
<span class="show-for-sr">Tiny Sandwiches Enabled</span>
</label>
</div>
</span>
<control-messages [control]="itemForm.controls.beyondQtyLimit" [name]="'Quantity'"></control-messages>
</div>
<div class="flex-container align-justify">
<div class="form-warning is-visible">
Additional documentation must be provided to support determination of medical necessity.
</div>
</div>
<div class="flex-container align-justify">
<span>Custom item?</span>
<span><div class="switch tiny">
<input class="switch-input" formControlName="customItem" id="customItem" type="checkbox" name="customItemName">
<label class="switch-paddle" for="customItem">
<span class="show-for-sr">Tiny Sandwiches Enabled</span>
</label>
</div>
</span>
</div>
<div class="flex-container align-justify">
<div class="form-warning is-visible">
Additional documentation must be provided to support determination of medical necessity.
</div>
</div>
</div>
</div>
<div class="small-12 medium-6 columns">
<div class="order-item-col-bottom order-docs">
<div class="order-item-sep"></div>
<div>Attachments<span class="button-span"><button type="button" class="button order-doc-button">Add New</button></span></div>
<ul>
<li class="order-doc"> DocumentName.pdf <span class="button-span"><button type="button" class="button order-doc-button">View</button></span><span class="button-span"><button type="button" class="button order-doc-button">Remove</button></span></li>
<li class="order-doc"> Document2222Name.pdf <span class="button-span"><button type="button" class="button order-doc-button">View</button></span><span class="button-span"><button type="button" class="button order-doc-button">Remove</button></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
here is component
@Component({
moduleId: module.id,
selector: 'Orders-order',
templateUrl: 'order.component.html',
styleUrls: ['order.component.css']
})
export class OrderComponent implements OnInit {
id: any;
subscription: any;
selectedVendor: Vendor;
order: Order;
managerList:any;
mylist:any;
item:number;
orderForm: FormGroup;
customDetails:FormGroup;
isCCP:boolean=true;
isXIX:boolean=false;
toDay:string;
nextDay:string;
nextDate:string;
initial:boolean=true;
revision:boolean=true;
recertification:boolean=true;
init:any;
constructor(private errorService: ErrorService,
private router: Router, private _route: ActivatedRoute,
private fb: FormBuilder, private orderService: OrderService) {
}
ngOnInit() {
this.typeXIX();
}
initItem1() {
return this.fb.group({
hcpcs: ['', Validators.required],
quantityFrequence: ['',Validators.required],
icd9:['',Validators.required],
justification:['',],
beyondQtyLimit:['',],
customItem:['',],
priorAuthRequired:['',]
});
}
typeXIX(){
this.isCCP=false;
this.isXIX=true;
if(this.isXIX) {
this.orderForm = this.fb.group({
entity: [''],
coordinator: this.fb.group({
id: ['', Validators.required]
}),
patient: this.fb.group({
id: ['', Validators.required]
}),
hsp: this.fb.group({
id: ['', Validators.required]
}),
vendor: this.fb.group({
id: ['', Validators.required]
}),
providerGroup:this.fb.group({
id:['',Validators.required]
}),
customDetails: this.fb.group({
extraInformation: ['',],
lines: this.fb.array([
this.initItem1(),
]),
durationNeed: ['',],
durationSupply: ['',],
lastSeenPhysician: ['', Validators.required]
}),
});
}
}
addItemXIX() {
const control = <FormArray>this.orderForm.controls['customDetails'].get('lines');
control.push(this.initItem1());
}
removeItemXIX(i: number) {
const control = <FormArray>this.orderForm.controls['customDetails'].get('lines');
control.removeAt(i);
}
}
