Как я могу восстановить значение поля формы ввода во вложенной форме

У меня есть список флажков, когда я устанавливаю один из флажков, появляется форма ввода. Мой вопрос: как я могу восстановить значение этой формы ввода?

Это мой компонент 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>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
164
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вам нужно «хранить» в 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

Спасибо за ответ, но у меня выдает эту ошибку app.global-error-handler.ts:83 Error: Cannot find control with path: 'coverages -> 0 -> check'

hiba nebli 22.12.2020 14:10

У меня работает с первым методом (с formControl). Большое спасибо

hiba nebli 22.12.2020 14:23

В stackblitz.com/edit/… у вас есть простой stackblitz -были ошибки в ответе-, не проверялось еще проверьте, я просто поправил, смотрите что в данном случае "покрытия" это массив объект, поэтому необходимо изменить ваши minSelectedCheckboxes

Eliseo 22.12.2020 14:44

Другие вопросы по теме