CODEWITHSUNDEEP
angularformsangular-reactive-forms
hiba nebli
hiba nebli

Reputation: 117

How can I recuperate the value of an input form field in a nested form

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

Answers (1)

Eliseo
Eliseo

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

Related Questions