CODEWITHSUNDEEP
javascriptnativescript
Rafael Augusto
Rafael Augusto

Reputation: 397

How change value data binding string with NativeScript

I'm trying to change the value of a data binding, and make the value change on screen too, but I'm not getting it.

My onPageLoaded

export function onPageLoaded(args: EventData) {

    main = <Page>args.object;


    main.bindingContext = fromObject({
        loading: false,
        next: true,
        prev: false,
        count: 0,
        percent: 10,
        dataBoundVariable: null,
        form_hemodialysis: null,
        form_hemoderivatives: null,
        form_special_medicine: null,
        form_medicine: null,
        form_antibiotics: null,
        form_bandaid: null,
        form_speech_therapy: null,
        form_motor_therapy: null,
        form_respiratory_therapy: null,
        form_other_therapy: null,
        form: {
            patientStatus: null,
            reason: null,
            assistantDoctor: null,
            council: null,
            hospitalizationTypeId: null,
            hospitalizationDate: '6/1/2019',
            cidId: null,
            accommodationId: null,
            hda: null,
            diagnosis: null,
            speechtherapy_start_date: null,
            speechtherapy_frequency: null,
            motortherapy_start_date: null,
            motortherapy_frequency: null,
            respiratorytherapy_start_date: null,
            respiratorytherapy_frequency: null,
            othertherapy_start_date: null,
            othertherapy_frequency: null,
            procedures: [],
            antibiotics_name: null,
            antibiotics_start_date: null,
            antibiotics_end_date: null,
            antibiotics_prescription: null,
            comment: null,
            special_medicament: null,
            medicine: null,
            diets: [],
            gasotherapies: [],
            dressings: array,
            procedure
        },
        status: [
            'Alta',
            'Internado',
            'Não encontrado'
        ],
        reasons: [],
        internationTypes: [],
        accommodations: [],
        diets: [],
        cdi: ['Rafael', 'Deivid'],
        gasotherapies: [],
        bandaidPhases: ['I', 'II', 'III', 'IV'],
        bandaid: {
            phase: null,
            region: null,
            lesion_width: null,
            lesion_length: null,
            used_cover: null,
            expected_exchange: null
        },
        procedure: {
            name: null,
            date: null
        },
        statusSelected: null,
        otherDiets: false,
        otherGasotherapies: false
    })
}

export function selectDateInternacao(args){
    modalDatetimepicker = new ModalDatetimepicker();

    modalDatetimepicker
    .pickDate({
      title: "Selecione a data",
      theme: "light"
    })
    .then(result => {
        var date = `${result.day}/${result.month}/${result.year}`

        main.bindingContext.form.hospitalizationDate = date     
    })
    .catch(error => {
      console.log(`Error: ${error}`);
    });
}

It is worth remembering that the value is updated, it does not change on screen, but if I give a console.log(main.bindingContext.form.hospitalizationDate) the value comes updated

Upvotes: 0

Views: 191

Answers (1)

Manoj
Manoj

Reputation: 21908

When you use fromObject({...}), changes on the immediate properties will only be monitored. modalDatetimepicker is nested inside form, so any changes on form can only trigger an update on UI. You may force it using either of the syntaxes below,

Assign a new object to form

main.bindingContext.form = Object.assign({}, main.bindingContext.form, {
 hospitalizationDate: date
});

(Or)

Force change detection by triggering property change event

main.bindingContext.form.hospitalizationDate = date;
main.bindingContext.notifyPropertyChange('form', main.bindingContext.form);

Upvotes: 1

Related Questions