Angular - FormArray дублирует и удаляет предыдущие значения - PullRequest
0 голосов
/ 21 апреля 2020

У меня есть комбинация множественного выбора , если пользователь выбирает 2 опции из этого, то для обоих необходимо создать FormGroup с 3 входами. И я могу добавить больше FormGroups к любой из них. Для этого я использую FormArray -

В моем сценарии у меня есть две проблемы:

  1. Если я выберу 1 вариант, заполните 3 ввода нажмите кнопку «Добавить еще» (которая создает другой элемент в FormArray , как указано выше), заполните эти 3 параметра, и теперь, если я выберу другой вариант из множественного выбора, it ' создадим 2 FormGroup вместо 1 для этого выбора (это не связано с другим выбором)

  2. Если я заполню 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 из форма переопределяется, потому что все выборки используют ее, и мне нужно создать отдельную форму для каждого выбранного выбора.

Что не так с моим кодом? Большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...