Как динамически обновить значение поля ввода текста в угловую форму? - PullRequest
Новая
       4

Как динамически обновить значение поля ввода текста в угловую форму?

0 голосов
/ 24 января 2019

Я использую angular-formly в угловых 4 проектах.Сценарий работы: у меня есть список пользователей, и у каждого пользователя есть кнопка редактирования и удаления.

Когда пользователь нажимает кнопку редактирования, появляется модал с 2 полями, одно из которых является электронным письмом.адрес и еще один, чтобы изменить роль пользователя.

Я использую <formly-form> для рендеринга формы на модал, как это.

enter image description here

Когда нажимается кнопка редактирования, открывается этот модал, где я хотел показать адрес электронной почты, связанный с кнопкой редактирования, которая нажата.

Кроме того, я хочу сохранить выбранную роль ввыпадающий список для этого пользователя.

Вот форма formlyfieldconfig 

{
        key: 'email',
        className: 'col-sm-4',
        type: 'input',
        defaultValue: '',
        templateOptions: {
            type: 'text',
            label: 'Email',
            disabled: true,
            placeholder: ''
        }
    },
    {
        key: 'role',
        className: 'col-sm-4',
        type: 'select',
        defaultValue: '',
        templateOptions: {
            label: 'Select Role',
            options: [],
            required: true
        }
    }

Как видно, выше для поля электронной почты я сохранил defaultValue как ноль, тогда как для поля роли я сохранил defaultValue иoptions as null.

Когда пользователь нажимает кнопку редактирования, я динамически устанавливаю свойство defaultValue и options, которое должно отображаться в модальной всплывающей форме. 

private edituser(account):void {        
        this.updateModal.show();
        let userData = updateuserdata;

        this._PicklistApi.findById('5c45b9e06c0bbc57b5d43a66')
            .subscribe(picklist => {
                if(picklist && picklist['options'].length) {

                    _.find(userData,{'key': 'email'})
                        .defaultValue = account.email;

                    _.find(userData,{'key': 'role'})
                        .defaultValue = account.role;

                        _.find(userData,{'key': 'role'})
                        .templateOptions.options = [...picklist['options']];


                }
        });

        this.updateuserdata = userData;                      
    }

this._PicklistApiэто сервисный объект, который даст мне список всех доступных ролей.

updateuserdata будет иметь фактическую конфигурацию поля формы, которая передается компоненту <formly-form> в HTML.

account - это объект пользователя, имеющий пользовательские данные, включая электронную почту и роль.

когда пользователь нажимает кнопку редактирования edituser() вызывается, и он правильно устанавливает параметры выбора с доступными ролями.

Но он не устанавливает defaultValue для электронной почты иРолевые поля.

Я не могу понять это поведение, так как параметры выбора устанавливаются правильно, в то время как он не устанавливает defaultValue для обоих полей.

Если я веду консольный журнал, то явидим, что defaultValue установлено для обоих полей, тогда почему оно не отражается в форме.

...