Using CakePHP form validation with angular JS

Question

I am building a simple invoice module using angular js and cake php.

The items fields are repeated using ng - repeat in my view as seen below

    <div ng:controller="ItemsCtrl" ng:app>
<div class="row-fluid items" >
    <hr>
    <ul class="invoice_items" ng:init="invoice={items:[{serial:'',details:'',qty:0,unit:'',rate:0,discount:0,amount:0}],pf:0}">
    <li ng:repeat="item in invoice.items">
    <div class="clear"></div>
    <div id="items_row">
        <div class="field span1">
                            <?php   
                        echo $this->TwitterBootstrap->input("Number", array(
                            "input" => $this->Form->text("Item.{{\$index}}.serial" , array('class' => 'serial span1' ,'placeholder' => 'S.No' , 'ng-model' => 'item.serial' , 'value' => '{{ $index + 1 }}' , 'readonly' => 'readonly' ))
                        )); ?>
        </div>

Closing the appropriate tags in the end

I have the following code in my model for validation -

public $validate = array(
    'id' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
    ),
    'serial' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
    ),
    'details' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
    ),
    'quantity' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
        'naturalnumber' => array(
            'rule' => array('naturalnumber'),
            'message' => 'Please enter a valid quantity'

        ),
    ),
    'rate' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
        'numeric' => array(
            'rule' => array('numeric'),

        ),
    ),
    'discount' => array(
        'numeric' => array(
            'rule' => array('numeric'),

        ),
    ),
    'amount' => array(
        'notempty' => array(
            'rule' => array('notempty'),

        ),
        'numeric' => array(
            'rule' => array('numeric'),

        ),
    ),
);

The issue is that the fields which are outside of the ng-repeat directive get validated as required , but since the fields inside ng-repeat get initialized on each page load, cakephp validation isnt applied to them .

Do you guys see any work around to this ? May be my entire architecture approach is wrong?

Answer 1

I think you should change the way you are solving the problem.

Use CakePHP to create a REST API and AngularJS for the frontend. It will be much easier (and better if you want to migrate your stack in the future, i.e. Dart or NodeJS).

You might want to read: https://github.com/hantsy/angularjs-cakephp-sample

Hope it helps.