samedi 9 mai 2015

Angular form validation on Yii Form

I am using AngularJS v1.3.15 for form validation within Yii dynamic form but it seems angular validation works on input names. the problem is that name of inputs are in array format such as: name="LoginForm[username]". i am copying my code here:

   <div class="col-md-4 col-md-offset-4 m-t-lg" ng-app="validationApp" ng-controller="mainController">
            <section class="panel">
                <header class="panel-heading text-center"><strong>Admin Sign in </strong> </header>
                <?php 
                        $form=$this->beginWidget('CActiveForm', array(
                            'id'=>'formLogin',
                            'htmlOptions'=> array('name'=>'userForm', 'class'=>'panel-body', 'ng-submit'=>'submitForm($event)', 'novalidate'=>'true'),
                            'action'=>'#',
                            'enableAjaxValidation'=>false,
                        )); 
                    ?>
                    <div class="form-group" ng-class="{'has-error' :  userForm.username.$invalid && !userForm.username.$pristine}">
                        <label class="control-label">Email</label> 
                        <?php echo $form->emailField($model, 'username', array('placeholder'=>'test@example.com', 'class'=>'form-control', 'ng-model'=>'user.username', 'ng-pattern'=>"/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", 'required'=>'true', 'id'=>'username')); ?>
                        <?php echo $form->error($model,'username'); ?>
                    </div>
                    <div class="form-group" ng-class="{'has-error' :  userForm.password.$invalid && !userForm.password.$pristine}">
                        <label class="control-label">Password</label> 
                        <input type="password" placeholder="Password" ng-minlength="6" class="form-control" name="password" ng-model="user.password" required>
                    </div>
                    <div class="checkbox">
                        <label> <input type="checkbox"> Keep me logged in
                        </label>
                    </div>
                    <button type="submit" class="btn btn-info" ng-disabled="userForm.$invalid">Sign in</button>
                <?php $this->endwidget(); ?>
            </section>
        </div>
    </div>

And here is script code for angular controller:

      var app = angular.module('validationApp',[]);
         app.controller('mainController', function($scope) {
            $scope.submitForm = function($event){
            if ($scope.userForm.$valid){
                $scope.submit();
            } else $event.preventDefault();
         } 
      });

it works fine if i change names of input as a single word such as "username" and "password" but its not working in current situation with having name "LoginForm[username]". its working fine with password field because its plain name but same is not true with username field.

Aucun commentaire:

Enregistrer un commentaire