Symfony 4 : how to override Fosuserbundle validation? - fosuserbundle

I use Symfony 4 and I try to override Fosuserbundle validation.xml by creating a new validation.xml file in config/validator/ but it does not work. It always uses default validation.xml, never the one I created.
I would like to change validation constraints for user registration.
config/packages/fos_user.yaml
fos_user:
db_driver: orm
firewall_name: main
user_class: App\Entity\User
from_email:
address: "test#domain.com"
sender_name: "test#domain.com"
registration:
form:
type: FOS\UserBundle\Form\Type\RegistrationFormType
name: fos_user_registration_form
validation_groups: [RegistrationValidation]
config/packages/framework.yaml
framework:
secret: '%env(APP_SECRET)%'
csrf_protection: true
validation: { enabled: true }
...
config/validator/validation.xml
<?xml version="1.0" ?>
<constraint-mapping xmlns="http://symfony.com/schema/dic/constraint-mapping"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://symfony.com/schema/dic/constraint-mapping
http://symfony.com/schema/dic/constraint-mapping/constraint-mapping-1.0.xsd">
<class name="FOS\UserBundle\Model\User">
<property name="username">
<constraint name="NotBlank">
<option name="message">fos_user.username.blank</option>
<option name="groups">
<value>RegistrationValidation</value>
</option>
</constraint>
<constraint name="Length">
<option name="min">4</option>
<option name="minMessage">fos_user.username.short</option>
<option name="max">180</option>
<option name="maxMessage">fos_user.username.long</option>
<option name="groups">
<value>RegistrationValidation</value>
</option>
</constraint>
</property>
</class>
I created a new validation group named RegistrationValidation.
As you can see in the sample above, I try to set the min length of the username on 4 caracters, but it always take 2 as the min length, the value that is defined in the default Fosuserbundle validation.xml.
Does someone know how to do that ? Documentation is not very clear and not up to date about Fosuserbundle with Symfony 4.
Thanks.

The solution seems to be using
<class name="App\Entity\User">
instead of
<class name="FOS\UserBundle\Model\User">
in config/validator/validation.xml. Indeed, "App\Entity\User" is the User class defined in config/packages/fos_user.yaml.
Nevertheless, validation.xml does not seem to work for fields like email or plainPassword for which minLength (for example) is not applied.
<property name="plainPassword">
<constraint name="NotBlank">
<option name="message">fos_user.password.blank</option>
<option name="groups">
<value>RegistrationValidation</value>
</option>
</constraint>
<constraint name="Length">
<option name="min">6</option>
<option name="minMessage">fos_user.password.short</option>
<option name="groups">
<value>RegistrationValidation</value>
</option>
</constraint>
</property>
It is even true with the default validation.xml of Fosuserbundle which defines constraints that are not taken into account when the registration form is rendered. I solved this problem by setting constraints directly in my twig form which override the fosuserbundle's one.
Hope this will help. If you have any other solution, don't hesitate to post it.

Related

React-Final-Form: It is taking initial value by default, how can I remove it?

component="select" taking first option as initial selection, though it is not specified anywhere. How do i remove the initial selection for component="select" in react final form ?
You can pass an empty option tag as the first option like this
<Field name="favoriteColor" component="select">
<option />
<option value="#ff0000">❤️ Red</option>
<option value="#00ff00">💚 Green</option>
<option value="#0000ff">💙 Blue</option>
</Field>

Can not transfer to an array in angularJs

When registering a user, I want to immediately define the role for it, for this I added a scroll, but since the roles field in Java is an array, I pass this value as an array, and so, I cannot understand why this value is not assigned
<div class="bloc">
<select name="role" size="">
<option value=["ROLE_USER"] ng-model="user.roles">ROLE_USER</option>
<option value=["ROLE_SUPPORT"] ng-model="user.roles">ROLE_SUPPORT</option>
</select>
</div>
As you understand, I cannot add a user like that, but if I add $scope.user.roles = ["ROLE_USER"] in the controller;
then the value is assigned to the roles field, and no problems arise, what would you advise on this issue? I get 400 error.
Can send more info if needed
<option value=["ROLE_USER"] ng-options="user.roles">ROLE_USER</option>
is it right version?
<label>Color grouped by shade, with some disabled:
<select ng-model="myColor"
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select>
</label><br />
that example from link

Angular form dropdown 1 used to select option in dropdown 2

I have two dropdown menus in an Angular form. One is country and the other is country dialing code. When the user selects USA on the first dropdown, I want to update the second dropdown to default to +1 for the dialing code. Otherwise, the second dropdown should deafult to the placeholder "Select Country Code". I have successfully done this using javascript, but Angular still considers the form to be invalid when submitted. I've tried forcing the field to become valid in the javascript, but it doesn't seem to work. Is there a way to do this using javascript or an ng command in the HTML? I would like to keep the html formatted as is (i.e. with the select and options tags).
HTML:
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>
JS:
$('select[name=country]').change(function () {
if ($(this).val() == '1') {
document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
} else {
document.getElementById("countryCode").value = "";
}
});
I've made a fiddle, but I am not sure whether this is same as your intent or not.
Change select box
<select ng-options="country.code as country.nameAndCode for country in countries"
ng-model="selectedCountryAndCode"
ng-change="changeCountryAndCode();"
required>
<option value="">Select Country Code</option>
</select>
If you use 'ng-options', it'll make code more simple.
.
.
UPDATE
Here's updated fiddle.
A little modified following as I've understood.
.
.
.
Latest UPDATE
Here's another updated fiddle

ngOptions setting value attribute of option to unexpected values

I have some doubts with using ngoptions. I am not able to set value attribute for the option items.Here is example plunker
$scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
{optiontext:'inactive',optionvalue:'opt2'},
{optiontext:'terminated',optionvalue:'opt3'}];
And my html code is
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues">
</select>
The generated html is as shown below.
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="string:opt1" label="Active">Active</option>
<option value="string:opt2" label="inactive">inactive</option>
<option value="string:opt3" label="terminated">terminated</option>
</select>
I was expecting it to be as shown below
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="opt1" label="Active">Active</option>
<option value="opt2" label="inactive">inactive</option>
<option value="opt3" label="terminated">terminated</option>
</select>
So why does it add string: to the value attribute? How i can get my desired output?
It has to deal with 1.3 -> 1.4 Angular version API change - if you check this plunkr (v.1.3) it will show just indexes as values of the <option> tags.
To make it also work with Angular +1.4 you should add the following statement to your ng-options expression track by emp.optionvalue. See this plunkr (v.1.4) .
<select id="emptype"
ng-model="empstatus"
ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
</select>
But the value of the ng-model is correctly updated in both cases, see {{empstatus}} in template of my examples.
So as #ExplosionPills say that should not be a issue.

AngularJS - Default Dropdown Select Option

This one issue is bugging me since it seems so easy to fix.
I am using plain HTML, but the data is being passed to the next view via angular.
The snippet of code looks like this:
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
What I am trying to achieve:
Having <option value="25">25-30</option> as the default selected option when angular loads
What I've tried:
Having <option value="25">25-30</option> with a ng-selected="age" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option ng-selected="age" value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Having <option value="25">25-30</option> with a selected="selected" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option selected value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Even trying <option value="25">25-30</option> displayed first
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="25">25-30</option>
<option value="21">21-24</option>
<option value="31">31 and up</option>
</select>
</span>
Option 2 and 3 does display the value I want first, but it is not passed through to the next view
If possible, I prefer not to touch much Angular code, as the main developer is out temporary...
Any help would be appreciated.
Thanks!
Apparently, After much digging into the code the - the age is already being set via a js function
a.defaultAge = {
Country: "25"
}
Thanks for the help David - Your comment is a good to know thing for future reference.
There are a problem here, do not use 'age' as the model but try using something like 'user.age' and assign the value to it like this;
var user = {}; user.age = 25;
<select class="selectpicker" data-ng-model="user.age">
The reason it does not work in the next view is, that the 'age' is totally gone when you reassign a new value to it. Angular monitor change to a variable reference, since the variable 'age' is gone, it does not know when to update the view. Using 'user.age' as the model, angular is watching the 'user' for changes, and if you change the age, Angular will update the view for you.

Resources