У меня есть список флажков, когда я устанавливаю один из флажков, появляется форма ввода. Мой вопрос: как я могу восстановить значение этой формы ввода?
Это мой компонент ts:
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;
}
}
И это мой 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>
вам нужно «хранить» в FormControl или в переменной. Вы можете создать новый FormArray в своей группе форм.
policyForm = new FormGroup({
...
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
coveragesValue:new FormArray([])
})
И затем вам нужно добавить FormControl в formArray CoversValue в вашей функции addCheckboxes. Ваш .html должен быть похож
<input type = "text" [formControl] = "policyForm.get('coveragesValue.'+i) >
Или лучше ваш FormArray может быть FormArray из FormGroups, а не FormArray из FormControls-. В этом случае у вас есть
coverages :new FormArray([], this.minSelectedCheckboxes(1)),
При добавлении элемента вы добавляете FormGroup
addCheckboxes() {
this.coveragestypes.forEach(() => this.coverageFormArray.push(
new FormGroup({
check:new FormControl(false)
value:new FormControl(null)
}));
}
И ваш html становится:
<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>
Вы видите, что если вы используете FormArray из FormControls — ваш код — вы используете [formControlName] = "i"
для получения значения formControl, если вы используете FormArray из FormGroups, вы объявляете [formGroupName] = "i"
в div и используете внутри formControlName
У меня работает с первым методом (с formControl). Большое спасибо
В stackblitz.com/edit/… у вас есть простой stackblitz -были ошибки в ответе-, не проверялось еще проверьте, я просто поправил, смотрите что в данном случае "покрытия" это массив объект, поэтому необходимо изменить ваши minSelectedCheckboxes
Спасибо за ответ, но у меня выдает эту ошибку
app.global-error-handler.ts:83 Error: Cannot find control with path: 'coverages -> 0 -> check'