Reputation: 117
I have a list of checkboxes, when I check one of the checkboxes an input form appear. My question is how can I recuperate the value of this input form ?
This is my ts component :
coveragestypes : Array<String> = [];
constructor(private coverageService : CoverageService) { }
policyForm = new FormGroup({
policyNumber : new FormControl('', Validators.required),
damageNumber : new FormControl('', Validators.required),
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
policyConditions : new FormControl('')
})
ngOnInit() {
this.getcoveragestype()
}
getcoveragestype(){
this.coveragestypes = this.coverageService.getCoverages() ;
this.addCheckboxes();
}
addCheckboxes() {
this.coveragestypes.forEach(() => this.coverageFormArray.push(new FormControl(false)));
}
get coverageFormArray() {
return this.policyForm.controls.coverages as FormArray;
}
}
And this is my html :
<div class="col-md-4 no-padding-left">
<span style="font-size: small ;">policyNumber</span>
<input type = "text" class="k-textbox form-control"
formControlName="policyNumber">
</div>
<div class="col-md-4 no-padding-left">
<span style="font-size: small ;">damageNumber</span>
<input type="text" class="k-textbox form-control"
formControlName="damageNumber">
</div>
<div class="col-md-4 no-padding-left">
<span style="font-size: small ;">coverages</span>
<div class="checkbox">
<label formArrayName="coverages" *ngFor="let coverage of coverageFormArray.controls;let i = index; ">
<input type="checkbox" kendoCheckBox [formControlName]="i" />
{{coveragestypes[i]}}
<ng-container *ngIf="coverage.value">
<input type="text" >
</ng-container>
</label>
</div>
</div>
Upvotes: 0
Views: 204
Reputation: 58124
you need "store" in a FormControl or in a variable. You can create a new FormArray in your formGroup
policyForm = new FormGroup({
...
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
coveragesValue:new FormArray([])
})
And then you need add a FormControl to the coveragesValue formArray in your function addCheckboxes. Your .html must be like
<input type="text" [formControl]="policyForm.get('coveragesValue.'+i) >
Or better your FormArray can be a FormArray of FormGroups -not a FormArray of FormControls-. In this case you has
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
When add an element you add a FormGroup
addCheckboxes() {
this.coveragestypes.forEach(() => this.coverageFormArray.push(
new FormGroup({
check:new FormControl(false)
value:new FormControl(null)
}));
}
And yout html becomes:
<form [formGroup]="policyForm">
<div formArrayName="coverages" class="checkbox">
<!--in the *ngFor use [formGroupName]-->
<div *ngFor="let coverage of coverageFormArray.controls;let i = index; " [formGroupName]="i">
<label >
<!--use formControlName for the checkBox-->
<input type="checkbox" formControlName="check" />
{{coveragestypes[i]}}
</label>
<ng-container *ngIf="coverage.value.check">
<!--use formControlName for the input-->
<input type="text" formControlName="value" >
</ng-container>
</div>
</div>
</form>
You see that, if you use a FormArray of FormControls -your code- you use [formControlName]="i"
to get the value of the formControl, if you use a FormArray of FormGroups you declare [formGroupName]="i"
in a div and use inside formControlName
Upvotes: 1