У меня есть комбинация множественного выбора , если пользователь выбирает 2 опции из этого, то для обоих необходимо создать FormGroup с 3 входами. И я могу добавить больше FormGroups к любой из них. Для этого я использую FormArray -
В моем сценарии у меня есть две проблемы:
Если я выберу 1 вариант, заполните 3 ввода нажмите кнопку «Добавить еще» (которая создает другой элемент в FormArray , как указано выше), заполните эти 3 параметра, и теперь, если я выберу другой вариант из множественного выбора, it ' создадим 2 FormGroup вместо 1 для этого выбора (это не связано с другим выбором)
Если я заполню 6 входов (, помните, что создано 2 FormGroup в предыдущей задаче ) из выбора new поля из выбора old получают переопределение этими значениями.
Помните, что для этого я использую FormArray .
Вот соответствующая часть моего кода:
. html:
<div class="form-group" *ngFor="let categoria of indicadorModal.value['categorias']">
<hr>
<div formArrayName="objetivos"
*ngFor="let objetivo of indicadorModal.get('objetivos').controls; let i = index;">
<div [formGroupName]="i">
<div style="padding-bottom: 20px;" class="objetivo-wrapper">
<label for="formGroupExampleInput">{{ _constantes.OBJETIVO_FORM }}
<strong>{{ categoria.nombreLargo }} </strong></label>
<span class="ui-float-label">
<input class="form-control" [placeholder]="_constantes.OBJETIVO"
maxlength="20" type="text" size="20" formControlName="objetivo"
type="text" appTwoDigitDecimaNumber
[regex]=this._constantes.PATTERN_TRES_DECIMALES>
<input [hidden]="true" formControlName="categoria"[ngModel]="categoria.id"
style="display: none;" />
</span>
</div>
<div style="padding-bottom: 20px;" class="objetivo-wrapper">
<label for="formGroupExampleInput">{{ _constantes.VARIABLE_OBJETIVO }}*</label>
<span class="ui-float-label">
<span style="padding-right: 20px;">
<p-radioButton formControlName="variable" [name]="categoria.id + '' + i"
value="true" [label]="_constantes.SI">
</p-radioButton>
</span>
<p-radioButton formControlName="variable" [name]="categoria.id + '' + i"
value="false" [label]="_constantes.NO">
</p-radioButton>
</span>
</div>
</div>
</div>
<div>
<p-button style="width: 175px; background-color: #002664;" icon="pi pi-plus"
[label]="_constantes.ANNADIR_OBJETIVO" (click)="annadirObjetivo()">
</p-button>
</div>
.ts
public objetivos: FormArray
public indicadorModal: FormGroup;
constructor(
private fb: FormBuilder
) {
this.indicadorModal = new FormGroup(
{
categorias: new FormControl([]),
objetivos: this.fb.array([this.crearObjetoObjetivo()])
});
this.objetivos = this.indicadorModal.get('objetivos') as FormArray;
}
private crearObjetoObjetivo(): FormGroup {
return this.fb.group({
objetivo: new FormControl(undefined),
variable: new FormControl(undefined),
mes: new FormControl(undefined),
categoria: new FormControl(undefined)
});
}
public annadirObjetivo(): void {
this.objetivos = this.indicadorModal.get('objetivos') as FormArray;
this.objetivos.push(this.crearObjetoObjetivo());
}
Также, как вы могли заметить, в FormArray есть категория f ield (это идентификатор выбранной опции для этого FormGroup ) Мне нужно заполнить это поле из html, так как нет способа получить его из .ts, поэтому он скрыт во входных данных в. html.
Я предполагаю, что проблема вызвана тем, что переменная objetivos из форма переопределяется, потому что все выборки используют ее, и мне нужно создать отдельную форму для каждого выбранного выбора.
Что не так с моим кодом? Большое спасибо