Can we use angular js validation in symfony2 forms? - angularjs

I am working on a registration form in symfony2 with angular js.
My doubt is can we do angular js validations in a symfony2 form?
because i cannot validate the form and also i dont know how to post form values to symfony controller..
please help..
I am stuck in project..
please check my registration.html.twig code..
<body ng-app="LoginApp">
<div id="register" class="animate form" ng-controller="RegisterController as registerCtrl">
{{ form_start(form, {'attr': {'name':'registerFrm', 'id':'registerFrmId','novalidate': '', 'ng-submit':'registerCtrl.registerFrm()'}}) }}
Your username
{{ form_row(form.username) }}
<span class="error" ng-show="submitted && registerFrm.adminuser[username].$error.required">Username is required!</span>
Your email
{{ form_row(form.email) }}
<span class="error" ng-show="submitted && registerFrm.adminuser[email].$invalid">Invalid email</span>
Your password
{{ form_row(form.plainPassword.first) }}
<span class="error" ng-show="submitted && registerFrm.adminuser[plainPassword][first].$error.required">Password is required!</span>
Please confirm your password
{{ form_row(form.plainPassword.second) }}
<span class="error" ng-show="submitted && registerFrm.adminuser[plainPassword][second].$error.required">Password is required!</span>
<p class="signin button">
<input type="submit" name="signup" ng-model="signup" ng-click="submitted=true" value="Sign up" />
</p>
{{ form_end(form) }}
</div>
<script>
var App = angular.module('LoginApp',[]);
App.controller('RegisterController', ['$scope',function($scope) {
}]);
</script>
</body>
My symfony form builder
$builder
->add('username', TextType::class , array(
'label' => false,
'attr' => array(
'ng-model' => 'formData.username',
'id' => 'usernamesignup',
'placeholder' => 'myusername690',
'required' => false)
))
->add('email', TextType::class , array(
'label' => false,
'attr' => array(
'ng-model' => 'formData.email',
'id' => 'emailsignup',
'placeholder' => 'mymail#mail.com',
'ng-pattern' => '/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/',
'required' => false)
))
->add('plainPassword', RepeatedType::class, array(
'type' => PasswordType::class,
'first_options' => array(
'label' => false,
'attr' => array(
'ng-model' => 'formData.password',
'id' => 'passwordsignup',
'placeholder' => 'eg. X8df!90EO',
'required' => false)
),
'second_options' => array('label' => false,
'attr' => array(
'ng-model' => 'formData.confirm_password',
'id' => 'passwordsignup_confirm',
'placeholder' => 'eg. X8df!90EO',
'required' => false)
),
)
);
registration form image

Hey Dmitry Grachikov,
Please change your code
<span class="error" ng-show="submitted && registerFrm.adminuser[username].$error.required">Username is required!</span>
to
<span class="error" ng-show="submitted && registerFrm['adminuser[username]'].$error.required">Username is required!</span>
Your code having syntactic JS error.
If you want to reference a property named adminuser[username], you should do it like this:
registerFrm['adminuser[username]'].$error
registerFrm.adminuser[username] is incorrectly interpreted as (registerFrm.adminuser)[username]

The easiest ways there is to render your form in twig just to get html of a form with field names. Afterwards you have to use exactly the same field names in form submit request and symfony forms component will handle it.

Related

How to add a div to a radio button?

I'm a new user of CakePHP.
I'm trying to add some div to contain my input + my label.
This is what I've got :
<?php
$option = array ("value1" => "labelContent1", "value2" => "abelContent2");
echo $this->Form->input('name', array('type' => 'radio', 'options' => $option, 'div' => true, "legend" => false));
?>
<div class="input radio">
<input type="hidden" name="data[Quiz][name]" id="ModelName_" value=""/>
<input type="radio" name="data[Quiz][name]" id="ModelName1" value="value1" />
<label for="ModelName1">labelContent1</label>
<input type="radio" name="data[Quiz][name]" id="ModelName2" value="value2" />
<label for="ModelName2">labelContent2</label>
</div>
And this what I would like to have :
<div class="input radio">
<input type="hidden" name="data[Quiz][name]" id="ModelName_" value=""/>
<div>
<input type="radio" name="data[Quiz][name]" id="ModelName1" value="value1" />
<label for="ModelName1">labelContent1</label>
</div>
<div>
<input type="radio" name="data[Quiz][name]" id="ModelName2" value="value2" />
<label for="ModelName2">labelContent2</label>
</div>
</div>
Do you know if it is possible to make it by using the FormHelper ?
I know it's an old thread but I had to reply.
The correct way to achieve this without creating a bad mark-up is to use before and after options:
echo $this->Form->input('name', array( 'type' => 'radio',
'separator'=> '</div><div>',
'before' => '<div>',
'after' => '</div>',
'options' => $option,
'label' => true,
"legend" => false
)
);
It looks like you can't achieve that with the Form Helper. The radio options are not wrapped in anything. See code.
You can add 'separator' => '<br/>' to the Form->input options, to display each option in its own line.
or implement it yourself.
you can try this
$option = array ("value1" => "labelContent1", "value2" => "abelContent2");
echo $this->Form->input('name', array( 'type' => 'radio',
'separator'=> '</div><div>',
'options' => $option,
'label' => true,
"legend" => false
)
);
<?php
$option = array ("value1" => "labelContent1", "value2" => "abelContent2");
echo $this->Form->input('name', array(
'type' => 'radio',
'options' => $option,
'templates' => ['radioWrapper' => '<div>{{label}}</div>'],
"legend" => false));
?>
This seems to work well for Cake 3.+

CakePHP 2.1 create select box

I am trying to add below style..
<div class="rowElem noborder">
<label>Language:</label>
<div class="formRight noSearch">
<select name="select2" class="chzn-select">
<option value="opt1">Choose the Language</option>
<option value="opt2" selected="selected">Kannada</option>
<option value="opt3">Telugu</option>
<option value="opt4">Tamil</option>
</select>
</div>
<div class="fix"></div>
</div>
But in cakephp, I have this code
<?php echo $this->Form->input('language_id', array('class' => 'chzn-select' )); ?>
Please give me the solution..
If I understand what you are asking, this is what you need to do.
In your controller you will create your options array for the select box:
$this->set('languageOptions', array('opt1' => 'Choose Language', 'opt2' => 'Kannada', 'opt3' => 'Telugu', 'opt4' => 'Tamil'));
Then in the view, you create the form:
<div class="rowElem noborder">
<label for="language_id">Language:</label>
<?php echo $this->Form->input('language_id', array('class' => 'chzn-select', 'options' => $languageOptions, 'label' => false, 'div' => array('class' => 'formRight noSearch'))); ?>
<div class="fix"></div>
</div>
$langs = array('opt1' => 'Choose Language', 'opt2' => 'Kannada', 'opt3' => 'Telugu', 'opt4' => 'Tamil');
$this->set(compact('langs')); // if you set options from controller
Then in view try this:
$this->Form->input('language_id', array(
'type' => 'select',
'options' => $langs,
'selected' => 2 // suppose default select Kannada
)
);
Cake Php Select Option Code
Language:
Form->input('language_id', array('class' => 'chzn-select', 'options' => $languageOptions, 'label' => false, 'div' => array('class' => 'formRight noSearch'))); ?>

Form checkbox and label with CakePHP and Bootstrap

I'm having some issues trying to get checkbox inputs and labels to output the correct HTML using CakePHP and Twitter Bootstrap.
The Bootstrap specific output should be:
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Keep me logged in
</label>
</div>
</div>
However, using the inputDefaults mentioned here (http://stackoverflow.com/a/9496242/1247225), this Cake form input:
echo $form->input('auto_login', array(
'type' => 'checkbox',
'label' => __('Keep me logged in', true)));
Outputs this:
<div class="control-group">
<input type="hidden" name="data[User][auto_login]" id="UserAutoLogin_" value="0" />
<input type="checkbox" name="data[User][auto_login]" class="" value="1" id="UserAutoLogin" />
<div class="controls">
<label for="UserAutoLogin">Keep me logged in</label>
</div>
</div>
Any ideas how to adjust this individual input so it outputs the correct Bootstrap HTML, like above?
The best way to control the form output, or the format of the output, is by passing a 'format' argument. Try playing with this:
'format' => array('before', 'label', 'input', 'between', 'after', 'error')
I don't think it is document, but by reading the code, you can find it in there.
the prettiest way to do it is this:
<?php
echo '<div class="col-lg-2">';
echo $this->Form->input('Content.checkbox', array(
'div' => array(
'class' => 'input-group',
),
'label' => false,
'type' => 'checkbox',
'before' => '<span class="input-group-addon">',
'after' => '</span><span class="input-group-addon"><label for="ContentCheckbox">What does the fox say?</label></span>',
));
echo '</div>';
I using :
<?php
echo $this->Form->input('coupDeCoeur',
array('div' => false,
'label' => false,
'type' => 'checkbox',
'before' => '<label class="checkbox">',
'after' => '<i></i>coupDeCoeur</label>'
));
?>
You need to build the form widget manually for checkboxes instead of using FormHelper::input.
For example:
echo '<div class="control-group">';
echo $this->Form->label('Model.field', null, array('class' => 'control-label'));
echo '<div class="controls">';
echo $this->Form->checkbox('Model.field');
echo '</div>';
echo '</div>';
Try following code:
<div class="control-group">
<div class="controls">
<label class="checkbox">
<?php echo $this->Form->input('auto_login', array('type'=>'checkbox','label' => false, 'div' => false,'class'=>false,'after'=>__('Keep me logged in')));?>
</label>
</div>
</div>
If you're using security component, you may have problems if you create your inputs without FormHelper::input. If that's the case, you should try with this:
echo "
<div class='control-group'>
<div class='controls'>
<label class='checkbox'>";
echo $this->Form->input('Model.field', array('label' => false, 'after' => 'Model.field'))."
</label>
</div>
</div>";
Here is the ready-to-use solution:
App::uses('FormHelper', 'View/Helper');
class InputHelper extends FormHelper {
// var $helpers = array('Form', 'Html');
public function create($model, $options = array()) {
$options['class'] = (isset($options['class']) && $options['class']) ? $options['class'] : 'form-horizontal table';
$options['inputDefaults'] = (isset($options['inputDefaults']) && $options['inputDefaults']) ? $options['inputDefaults'] : array(
'div' => 'control-group',
'label' => array('class' => 'control-label'),
'between' => '<div class="controls">',
'after' => '</div>'
);
return parent::create($model, $options);
}
public function input($fieldName, $options = array()) {
$this->setEntity($fieldName);
$options = $this->_parseOptions($options);
if ($options['type'] == 'checkbox') {
$options['format'] = array('before', 'label', 'between', 'input', 'after', 'error');
}
fdebug($options);
return parent::input($fieldName, $options);
}
}
If you want a "one line" answer i got it:
echo $this->Form->input('Model.Field', array('class'=>'form-inline', 'after'=>'</br>'));
In my case, I used AdminLTE template with Bootstrap 3 and this code was working for me:
<?php
echo $this->Form->input('Model.fieldname', array(
'label' => false,
'type' => 'checkbox',
'before' => '<label>',
'after' => 'Field name label here</label>',
));
?>
Good luck here!!!
Here's a simple solution that works for me:
The CSS (LESS):
input.form-control[type="checkbox"] {
width: auto;
height: auto;
margin-right: 5px;
display: inline;
}
Then use the Form helper:
echo $this->Form->input(
'field_name',
array(
'div' => 'form-group',
'class' => 'form-control',
'type' => 'checkbox',
'label' => array(
'text' => 'Your label',
'class' => 'label-checkbox'
),
'format' => array('input', 'label')
)
);

Add label for submit button

I'm new in cakephp. What I try to accomplish is this output :
<p><label> </label><input class="adminbut rad2" type="submit" name="submit" value="Login" /></p>
And this is what I did in my view file
<?php echo $this->Form->end(array(
'div' => false,
'label' => 'Login',
'class' => 'adminbut rad2',
'name' => 'submit',
'value' => 'Login',
'before' => '<p>',
'after' => '</p>'
));?>
And what I got is :
<input class="adminbut rad2" name="submit" value="Login" type="submit" /></p>
And as you can see, my output is missing :
<label> </label>
Any solution?
Thanks :)
Try
$form->create();
$form->submit("Login",array( 'div' => false, 'class' => 'adminbut rad2', 'name' => 'submit', 'value' => 'Login', 'before' => '<p><label> </label>', 'after'
=> '</p>'
));
$form->end();
echo $form->input('submit', array(
'type'=>'submit',
'value'=>'Login',
'class'=>'adminbut rad2',
'div'=>array('tag'=>'p'),
'label'=>" "
));
Try This my friend
Cakephp 2.X
$this->Form->submit(__('Submit'), array('class'=>'adminbut rad2'));
Cakephp 1.x
$form->submit(__('Submit'), array('class'=>'adminbut rad2'));

Set the options for the Field of Type Radio button in Form Helper in Cakephp

I am using a Form helper in CakePHP. like
echo $form->input('field', array(
'type' => 'radio','legend'=>$r['Attribute']['label'],
// 'after' => '--after--',
// 'between' => '--between---',
'separator' => '--separator--',
'options' => array('1', '2')
));
which generates me as
<div class="input radio">
<fieldset>
<legend>Gender</legend>
<input type="hidden" value="" id="field_" name="data[field]"/>
<input type="radio" value="0" id="Field0" name="data[field]"/>
<label for="Field0">1</label>--separator--
<input type="radio" value="1" id="Field1" name="data[field]"/>
<label for="Field1">2</label>
</fieldset>
</div>
Is there any way to keep my options that i have received from my Database instead of 1,2
where i tried it with receving my options using
<?php foreach ($viewfields as $r): ?>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$("#"+<?=$r['Attribute']['id'];?>).each(function() {
type= "<?=$r['Attribute']['type'];?>";
if(type=="radio")
{
var ht = $.ajax({
type: "GET",
url: "http://localhost/FormBuilder/index.php/forms/viewChoices/"+attribute_id,
async: false
}).responseText;
var myObject = eval('(' + ht + ')');
var data = myObject;var j=0;
$.map(data.choices, function(i){ j++;
alert(i.choice);//which alerts as male and female correctly.
return i.choice;});
}
});//each
});
alert(i.choice); alerts the options correctly ..
How to keep these options in the array() of the Form Helper so that to get these options male and female instead of default 1,2
Please suggest me..
Place the options in a key => value array - as shown here : Cake Options
echo $form->input('field', array(
'type' => 'radio',
'legend' => $r['Attribute']['label'],
'separator' => '--separator--',
'options' => array('Male' => 'male', 'Female' => 'female')
));
See how you go.

Resources