Get data from form in AngularJS without using two-way data binding

Question

The code works with two-way data binding. But I have this constraint, no = but <.

When I run for the first time the application, the text inputs will have initial hard-coded values. I want to be able to write new values in the inputs and send them to the controller.

Is this possible in one-way data binding?

I will put my code to be more clear.

This is my controller:

class DemandCtrl {
    constructor(ChartDataService) {
        this.ChartDataService = ChartDataService;
        debugger;
        this.dataa = {
            from: '10/01/2017',
            to:  '10/03/2017'
        };
    }

    $onInit() {
        getData.call(null, this);       
    }

    update() {
        getData.call(null, this);   
    }

function getData(DemandCtrl) {
    debugger;
    DemandCtrl.ChartDataService.getData(DemandCtrl.dataa).then(result => {
        DemandCtrl.result = result.data;
        getChart(result.data);
    }).catch((e) => {
        console.log(e);
    });
}

...

DemandCtrl.$inject = ['ChartDataService'];

export const Demand = {
    bindings: {
        data: '<'
    },
    templateUrl: demandPageHtml,
    controller: DemandCtrl
};

This is the html page:

<div class="demand page">        
    <rtm-nav from="$ctrl.dataa.from", to="$ctrl.dataa.to", submit="$ctrl.update()">         
    </rtm-nav>      
</div>

And rtm-nav component:

<div class="rtm-nav">
    <div ng-app>
    <form ng-submit="$ctrl.submit()">
        <label>From:
            <input type="text" name="input" ng-model="$ctrl.from">
        </label>
        <label>To:
            <input type="text" name="input" ng-model="$ctrl.to">
        </label>
        <input type="submit" id="submit" value="Apply" />
    </form> 
    </div>
</div>

This is the controller of the component. If I change < to =, everything works as I want but can I do it without changing it?

const rtmNav = {
    bindings: {
        from:'<',
        to:'<',
        submit: '&'
    },
    controller: angular.noop,
    templateUrl: require('./rtmNav.html')
}

export default rtmNav;

Use the ng-change on the <input> elements and output changes with expression, '&' binding. — georgeawg
– georgeawg, Commented Oct 24, 2017 at 15:57

georgeawg · Accepted Answer · 2017-10-25 11:41:27Z

1

It can be done using this way.

In the component it must be added an object literal to submit:

<div ng-app>        
        <form ng-submit="$ctrl.submit({from:$ctrl.from, to:$ctrl.to})">
            <label>From:
                <input type="text" name="input" ng-model="$ctrl.from">
            </label>
            <label>To:
                <input type="text" name="input" ng-model="$ctrl.to">
            </label>
            <input type="submit" id="submit" value="Apply" />
        </form> 
    </div>

Update method must be converted to look like this:

update = (from, to) => { 

    this.dataa.from = from;
    this.dataa.to = to;   
    getData.call(null, this);

 }

And in the component in html page must be added from and to as parameters to the function:

<rtm-nav from="$ctrl.dataa.from" to="$ctrl.dataa.to"
         submit="$ctrl.update(from, to)"/>

edited Oct 25, 2017 at 11:41

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Oct 25, 2017 at 10:11

Samurai Jack

3,1559 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2017-10-24 16:16:22Z

0

Use the ng-change directive on the <input> elements:

<div class="rtm-nav">
    <div ng-app>
    <form ng-submit="$ctrl.submit()">
        <label>From:
            <input type="text" name="input" ng-model="$ctrl.from"
                   ng-change="fromChange({$value: $ctrl.from})" />
        </label>
        <label>To:
            <input type="text" name="input" ng-model="$ctrl.to"
                   ng-change="toChange({$value: $ctrl.to})" />
        </label>
        <input type="submit" id="submit" value="Apply" />
    </form> 
    </div>
</div>

Output changes with expression, '&' binding:

const rtmNav = {
    bindings: {
        from:'<',
        fromChange: '&',
        to:'<',
        toChange: '&',
        submit: '&'
    },
    controller: angular.noop,
    templateUrl: require('./rtmNav.html')
}

Usage:

<rtm-nav from="$ctrl.dataa.from" to="$ctrl.dataa.to"
         from-change="$ctrl.dataa.from = $value"
         to-change="$ctrl.dataa.to = $value"
         submit="$ctrl.update()" >         
</rtm-nav>

edited Oct 24, 2017 at 16:16

answered Oct 24, 2017 at 16:07

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

Samurai Jack Over a year ago

I tried with your approach, still doesn't work well. When I launch the application it renders the chart for the hard-coded inputs, if I write other values and click Apply it does the re-render for the same hard-coded values. Looked in Network and it does the same data call

Collectives™ on Stack Overflow

Get data from form in AngularJS without using two-way data binding

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related