Чтобы обновить значение formcontrol формы группы из другой группы форм, но я не хочу постоянно изменять значения (Angular) - PullRequest
Новая
       51

Чтобы обновить значение formcontrol формы группы из другой группы форм, но я не хочу постоянно изменять значения (Angular)

6 голосов
/ 03 апреля 2020

При наведении курсора на первый столбец в таблице появляется всплывающая подсказка, при нажатии кнопки открывается диалоговое окно с правкой json раздел

. Я предоставил 2 функции: -

[ Пожалуйста, выберите строку из левого раздела в диалоговом окне ]

1) json можно редактировать (В этом случае пользователь нажимает на строку из левого раздела, начинает редактирование json и без отмены новых изменений пользователь нажимает на другую строку в левой части и снова выбирает ранее выбранную строку, исходные данные json сохраняются)

2) Пользователь нажимает на строку в левой части и начинает вводить данные из поля ввода (присутствует чуть выше кнопки «Добавить как»). Я начинаю обновлять клавишу «mTitle» в разделе «Редактировать Json», так что и здесь, когда пользователь нажимает на другую строку и снова возвращается Для ранее выбранной строки клавиша json 'mTitle' не показывает исходное (старое) значение

Ожидаемое поведение

Я ожидал, что когда пользователь введет данные, ключ «mTitle» должен быть обновлен (что работает), но ключ «mTitle» должен снова сохранить свое старое значение после нажатия кнопки «Добавить как новый» или после нажатия пользователем. щелкает по какой-то другой строке (такое же поведение, как в случае 1)

ссылка Stackblitz https://stackblitz.com/edit/angular-mat-tooltip-v6m2tz?file=app%2Falert-dialog%2Falert-dialog.component.ts

Пожалуйста, предложите

alert-dialog.component. html

<form [formGroup]="jsonform">
            <json-input formControlName="json" name="result"></json-input>
</form>

 <form [formGroup]="submitJsonNameAndForm" class="">
    <mat-form-field [floatLabel]="'never'" class="alertinput">
        <input matInput trim type="text" #alertnamefieldRef formControlName="alertnamefield" placeholder="Custom Alert Name"
            autocomplete="off" (keyup) = "passingAlerTitle(alertnamefieldRef?.value)">
    </mat-form-field>
</form>

alert-dialog.component.ts 

passingAlerTitle(event){
    this.data.data[this.selectedId].conditionals.alert.mTitle = event;
    this.jsonform.setValue({
      json: this.data.data[this.selectedId].conditionals
     });  
}

1 Ответ

1 голос
/ 06 апреля 2020

Я пытался реализовать это при добавлении новой кнопки

Вам просто нужно сохранить копию выбранного элемента и использовать ее в соответствии с вашими условиями.

Вот ссылка stackblitz

В строке 59 this.customTitle = _.cloneDeep (this.data.data [this.selectedId]) ;, когда пользователь выбирает из левой панели, сделал копию в пользовательском заголовке

В строке 72 создана временная переменная, которая будет хранить измененный объект из jsonData.

В строке 73 обновлены json данные с исходными данными, которые были в customTitle.

В строке 74, добавлена ​​временная переменная (новый заголовок) к json данным (это строка, которая была обновлена, вы можете использовать ее где угодно)

...