I am stuck here and would very much appreciate help. I have a form in a razor view with a input field for current city which looks like this:
#Html.LabelFor(x => x.UserModel.CurrentCity)
#Html.TextBoxFor(x => x.UserModel.CurrentCity, new { #data_bind = "value: UserModel.CurrentCity ", #class = "city", #data_val = "true", #data_val_required="City is required" })
#Html.ValidationMessageFor(x => x.UserModel.CurrentCity)
I want autocomplete for this field and am using jquery token input plugin for this like:
$(".city").tokenInput('#Url.Action("AutocompleteCity", "Settings")',{ minChars: 2, tokenLimit: 1, hintText: "Type in a city" });
$(".city").tokenInput("add", {name: viewModel.UserModel.CurrentCity()});
Everything works fine except the clientside unobtrusive validation. The form gets posted even if CurrentCity is empty.
I also tried to change the MVC helpers to plain html:
<input data-val="true" data-val-required="City is required" type="text" class="city" data-bind = "value: UserModel.CurrentCity, attr: { name: 'UserModel.CurrentCity', id: 'UserModel.CurrentCity'}" />
<span class="field-validation-valid" data-valmsg-for="UserModel.CurrentCity" data-valmsg-replace="true"></span>
This approach prevents the form from being submitted but the validation-error class is not injected into the span and the error message does not show up.
Any suggestions?
The original input element you created is hidden. You will likely need to enable validation of hidden elements: jquery.validate v. 1.9 ignores some hidden inputs or https://stackoverflow.com/a/13295938/173225.
Related
I am running laravel backpack 3.4 and created a custom select2 fieldtype from the standard one, I am now trying to based on an onchange event change the value selected on another select options but no change is happening
This is the field declararion
<select onchange="updateunit(this, '{{$field['name']}}' )" id="{{$field['name']}}_<% $index %>" data-index="<% $index %>"
ng-model="item.{{ $field['name'] }}"
[ngValue]="value"
#include('crud::inc.field_attributes', ['default_class' => 'form-control select2'])
>
<option value="">-</option>
#if (isset($field['model']))
#foreach ($field['model']::all() as $connected_entity_entry)
<option value="{{ $connected_entity_entry->getKey() }}"
>{{ $connected_entity_entry->{$field['attribute']} }}</option>
#endforeach
#endif
</select>
And this is the way I am trying to modify the select field selected option
function updateunit(object,name){
var fieldname;
fieldname = object.id;
fieldname = fieldname.replace('product_id','order_unit');
/* data:'_token = <?php echo csrf_token() ?>', */
$.ajax({
type:'POST',
url:'/getmsg',
data: {id:object.value},
async: false,
success:function(data) {
alert(fieldname);
alert(data.msg);
document.getElementById(fieldname).value = data.msg;
},
error:function(){alert('Unidade de Compra não está definida')},
});
This is not working, but I have not enough knowledge either on JS neither Angular to understand why this won't bind.
The elements that are created by your field configurations use the jquery select2 plugin to create a fancy select box. It does this by hiding the plain select element then displaying an html structure that builds the fancy dropdown etc in its place.
document.getElementById(fieldname).value = data.msg; will set the value of the hidden select field, but will not update the value shown by the plugin's fancy html dropdown.
To make the value that's display by the plugin change, we have to call .trigger('change') so the select element tells any listening javascript (ie the select2 plugin) that it's internal value has changed and the plugin should now update its display to match. ie, run this:
$('#'+fieldname).val(data.msg).trigger('change')
See more detailed documentation here
I'm trying to use a custom Input component on a Typeahead with the multiple option set. I see in the docs it says to "handle the refs" correctly, but I see no examples of how this is done. I'm not sure what to pass into referenceElementRef. Everything I've tried so far just doesn't render the options as I type. I see them in the DOM, but the opacity of the .rbt-menu is set to 0, so they're basically hidden.
Here's my code so far:
const divRef = React.useRef(null);
return (
<Col>
<div ref={divRef}>
<span className="uppercase">
<FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
</span>
<AsyncTypeahead
multiple
id="customer-filter-input"
inputProps={{
'aria-label': 'Customer search',
style: { fontSize: '14px' },
}}
key={'customer-input'}
minLength={4}
isLoading={props.isLoadingcustomersSuggestions}
delay={300}
onSearch={(term: string) => handleFilterInputs(term, 'customers')}
size={'lg'}
options={dataSource}
labelKey={'defaultMessage'}
placeholder={intl.formatMessage({
id: 'companyName',
defaultMessage: 'Company name',
})}
onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem, 'customer')}
renderInput={({ inputRef, referenceElementRef, ...inputProps }: any) => (
<Input
{...inputProps}
style={{ position: 'relative' }}
ref={(input: any) => {
inputRef(input);
referenceElementRef(divRef); // What do I put here?
}}
/>
)}
/>
</div>
</Col>
);
And this is what renders in the DOM after I type in the Typeahead and get results:
Any ideas or working examples of Typeahead using multiple and renderInput together?
EDIT:
Here's a codesandbox of what I'm seeing. I also see that the problem is also happening when multiple is NOT set. It seems to be an issue with using renderInput. Is it required that I also use renderMenu?
https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z
If you upgrade the typeahead version in your sandbox to the latest version (v5.1.1) and pass the input element to referenceElementRef, it works (note that you need to type some characters into the input for the menu to appear):
// v5.0 or later
renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
referenceElementRef(input);
}}
/>
)}
The menu is rendered in relation to the referenceElementRef node by react-popper. In most common cases, the reference node will be the input itself. The reason there's both an inputRef and a referenceElementRef is for more complex cases (like multi-selection) where the menu needs to be rendered in relation to a container element around the input.
If using v4 of the component, the approach is similar, but the ref to use is simply called ref:
// v4
renderInput={({ inputRef, ref, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
ref(input);
}}
/>
)}
Let's say I have a checkout form that contains a child address component as follows
<form [formGroup]="checkoutForm">
<input formControlName="fullName">
/** more inputs **/
<address-form></address-form>
<button type="submit">Submit</button>
</form>
At the moment I have the checkoutForm built like:
this.checkoutForm = this.formBuilder.group({
fullName: ['', Validators.required]
});
The addressForm template is like:
<form [formGroup]="addressForm">
<input formControlName="street">
<input formControlName="town"
</form>
And built like:
this.addressForm = this.formBuilder.group({
street: ['', [Validators.required]],
town: ['', Validators.required]
});
Now the issue I have is I dont know how to
1 - Validate the parent form only when the child form is valid.
2 - Validate the child form when the parent form is submitted.
The only way I could think about it is to have an #Output() addressResponse that will emit on this.addressForm.valueChanges with the validity and data. Something like:
this.addressForm.valueChanges.subscribe(data => {
let form = this.addressForm.valid ?
{ valid: true, value: data }:
{ valid: false, value: data };
this.addressResponse.emit(form);
});
And the parent form component can use this emitted data.
And also have an #Input() parentFormSubmitted that I can use to display the errors in the template of AddressForm
<input formControlName="town"
<div *ngIf="town.hasError('required') && (parentFormSubmitted || town.dirty">Town is a required field</div>
While this would work, I am not sure it is the optimal solution. I was wondering if there a more Reactive Form way of doing things. (Maybe include the AddressForm group in the definition of the CheckoutForm group?...)
You are completely correct with your comment:
I was wondering if there a more Reactive Form way of doing things. (Maybe include the AddressForm group in the definition of the CheckoutForm group?...)
You can build your form in your parent, and pass the nested group address to your child as an #Input. As objects in JS are mutable, your don't need an EventEmitter to pass any changes to your parent from child, changes will be caught "automatically" and you can therefore do all validation from the parent.
So in parent build your form like:
this.checkoutForm = this.formBuilder.group({
fullName: ['', [...]],
address: this.formBuilder.group({
street: ['', [...]],
town: ['', [...]]
})
})
then in your child tag pass the address to child as #Input:
<address-form [address]="checkoutForm.controls.address"></address-form>
In your child you mark the #Input:
#Input() address: FormGroup;
and the template in child would look like:
<div [formGroup]="address">
<input formControlName="street"><br>
<!-- Validation messages -->
<input formControlName="town">
<!-- Validation messages -->
</div>
and as mentioned, you can now handle all validation from the parent, as the parent is aware of what values the child has :)
new to Symfony and trying to understand something. I have index.twig.html and in it, I have a form
<form action="{{ path('SpecialAlertBundle_add') }}" method="post" enctype="multipart/form-data" class="addAlertForm">
<textarea class="addMargin" id="na_command" name="na_command" rows="3" cols="50" placeholder="A20APRLONLAX"></textarea>
<button type="button" class="btn btn-default" id="submit_alert" name="submit_alert">Submit</button>
{{ name }}
</form>
I wont add all the html, but its a normal form, not using Form Builder.
I have a route set up
SpecialAlertBundle_add:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:add }
requirements:
_method: GET|POST
So that route displays my form ok when I go to localhost:8000. It also states which controller to use. As for the controller, I have
class AlertController extends Controller
{
public function addAction()
{
$request = $this->get('request_stack')->getCurrentRequest();
if ($request->request->has('submit_alert')) {
$name = $request->request->get('na_command');
} else {
$name = 'Not submitted yet';
}
return $this->render('SpecialAlertBundle:Page:index.html.twig', array(
'name' => $name
));
}
}
The first thing I want to clear up is that return in the controller. Is this the view I want it to render AFTER the form has been submitted?
Second thing is, at the moment, The {{name}} in the template is always displaying Not submitted yet. Even when I submit the form with data, nothing seems to happen. It seems that the button is doing nothing. Even when I look in the debug console, I see no request being made.
So I was hoping someone could advise me on what I am doing wrong here?
Thanks
First of all why don't you use Request directly in controller instead of request_stack? Request stack is mostly for injecting it to service (and not to inject request to the service).
So, you can do something like this:
public function addAction(Request $request)
{}
Then I'd suggest you to separate get request and post request. Just define two different routes.
For example:
SpecialAlertBundle_add:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:add }
requirements:
_method: GET
SpecialAlertBundle_create:
pattern: /
defaults: { _controller: SpecialAlertBundle:Alert:create }
requirements:
_method: POST
After this you will have to change your form action value: set it to 'SpecialAlertBundle_create'
And it will be cleaner which one is now. After that you just don't need the checking on existence of 'submit_alert' property in request. You can assign the value of 'na_command' field to the $name:
$name = $request->get('na_command');
Imagine this scenario: in our company there is an employee that "play" around graphic,css,html and so on.
Our new project will born under symfony2 so we're trying some silly - but "real" - stuff (like authentication from db, submit data from a form and persist it to db and so on..)
The problem
As far i know, learnt from symfony2 "book" that i found on the site (you can find it here), there is an "automated" way for creating and rendering forms:
1) Build the form up into a controller in this way
$form = $this->createFormBuilder($task)
->add('task','text'),
->add('dueDate','date'),
->getForm();
return $this->render('pathToBundle:Controller:templateTwig',
array('form'=>$form->createview());
2) Into templateTwig render the template
{{ form_widget(form) }} // or single rows method
3) Into a controller (the same that have a route where you can submit data), take back submitted information
if($rquest->getMethod()=='POST'){
$form->bindRequest($request);
/* and so on */
}
Return to scenario
Our graphic employee don't want to access controllers, write php and other stuff like those. So he'll write a twig template with a "unconventional" (from symfony2 point of view, but conventional from HTML point of view) method:
/* into twig template */
<form action="{{ path('SestanteUserBundle_homepage') }}" method="post" name="userForm">
<div>
USERNAME: <input type="text" name="user_name" value="{{ user.username}}"/>
</div>
<div>
EMAIL: <input type="text" name="user_mail" value="{{ user.email }}"/>
</div>
<input type="hidden" name="user_id" value="{{ id }}" />
<input type="submit" value="modifica i dati">
</form>
Now, if into the controller that handle the submission of data we do something like that
public function indexAction(Request $request)
{
if($request->getMethod() == 'POST'){ // sono arrivato per via di un submit, quindi devo modificare i dati prima di farli vedere a video
$defaultData = array('message'=>'ho visto questa cosa in esempio, ma non capisco se posso farne a meno');
$form = $this->createFormBuilder($defaultData)
->add('user_name','text')
->add('user_mail','email')
->add('user_id','integer')
->getForm();
$form->bindRequest($request); //bindo la form ad una request
$data = $form->getData(); //mi aspetto un'array chiave=>valore
/* .... */
We expected that $data will contain an array with key,value from the submitted form.
We found that it isn't true. After googling for a while and try with other "bad" ideas, we're frozen into that.
So, if you have a "graphic office" that can't handle directly php code, how can we interface from form(s) to controller(s) ?
UPDATE
It seems that Symfony2 use a different convention for form's field name and lookup once you've submitted that.
In particular, if my form's name is addUser and a field is named userName, the field's name will be AddUser[username] so maybe it have a "dynamic" lookup method that will extract form's name, field's name, concat them and lookup for values.
Is it possible?
You can force Symfony2 to set the name of a form field, though I don't suggest it: $formBuilder->add('dummyfield', 'text', array( 'attr' => array('name' => 'yournamehere') ) );
Alternatively (also a bad idea), you can do this, which won't even let you use the form API: $this->getRequest()->get('whatever_the_field_name_is');
OR you can hackily add elements to the request based on the Sf2 generated names before binding it (copying the values that exist).
OR you can make use of the bind method of the form component (instead of bindRequest) as documented here.
But seriously...just use the formbuilder api. Your life will be easier, and isn't that what a framework is for? :)
Symfony 2 is based on twig as templating language. Let him use it :
{{ form_label(form.field) }}
will generate something like this :
<label for="field">field</label>
You can use all the available functions in order to render the form :
{{ form_label() }}
{{ form_widget() }}
{{ form_errors() }}
If you want to customize what is rendered by those functions, you can override twig templates as defined in the Symfony2 documentation.
Otherwise if you really want to something ugly, you can go for this kind of syntax :
{{ myform.vars.value.myField }}