Trying to understand what the 'onlySelf' parameter does when passing to setValue.
this.form.get('name').setValue('', { onlySelf: true })
The documentation says: "If onlySelf is true, this change will only affect the validation of this FormControl and not its parent component. This defaults to false."
However I'm struggling to understand this. Still fairly new to the using Angulars' model driven forms.
Angular2 by default will check for the form control/form group validity cascadingly up to the top level whenever there's an update to any form element value, unless you say no. onlySelf is the tool to help you do that.
Say you have a loginForm that has a username field and a password field, both of them are required, like this:
this.userNameControl = this.formBuilder.control('Harry', Validators.required);
this.passwordControl = this.formBuilder.control('S3cReT', Validators.required);
this.loginForm = this.formBuilder.group({
userName: this.userNameControl,
password: this.passwordControl
});
After this code, this.loginForm.valid is true.
If you set the value of a control using the default setting (onlySelf = false), Angular2 will update the control's validity as well as form group's validity. For example, this:
this.passwordControl.setValue('');
will result in
this.passwordControl.valid === false
this.loginForm.valid === false
However, this:
this.passwordControl.setValue('', { onlySelf: true });
will only change passwordControl's validity only:
this.passwordControl.valid === false
this.loginForm.valid === true
Put it this way, let's say that you have a form, called mainForm which is valid. It has four controls on it and all four have a value. Now, you decide to update the value of one of your controls, let's say you update it to some incorrect value and you specify onlySelf: true. If you try to call this.mainForm.valid, you will get the result that your form is valid even though your control is not valid, and it's invalid state should not allow the form to be submitted. But because the forms valid property is reporting true, you will be submitting inconsistent values to the backend.
It might be confusing why you would have this property, but there might be occasions when you don't want to invalidate the form because of one value or control. Probably you have some advanced checks on the server and you want to correct the value on the server or you might depend on a value from some external web service that might not be available at the time. I'm sure there are number of scenarios but this is something from top of my head.
Related
Am running a form using fluid with two fields, username and password. When first run, correct data is sent to the action. When different data is resubmitted, original data is sent to the controller action instead of the new values. How do I solve this problem?
EDIT: I've discovered that an array containing the user-submitted form fields and their values are obtained from the request, serialized as is and the string stored in a hidden input field called '__referrer[arguments]', which is then submitted with the form back to the user. When the user resubmits the form again with new values, the user doesn't realize that the old values are in the form, in the form of a serialized string, which is submitted together with the new values. Turns out, this is ok if no errors are reported by the validators. In that case the data is simply passed to the controller action and processing continues. But if errors are collected, processing is not sent to the controller action but is sent to the error action. The error action unserializes the old data and forwards that data (instead of the the new values) to the intended action controller. See \TYPO3\CMS\Extbase\Mvc\Controller\ActionController::forwardToReferringRequest().
EDIT: Steps to reproduce;
Create an action with one argument and create a form with one input element and a submit button. Create a validator for the element. Make it a string property. When all is said and done, start by sending a VALID value and let the form return. it will come back with no errors. but also if you look at it's hidden values, you find that the __referrer[arguments] has changes. That's because your previous values were serialized and are there. Now submit an INVALID value and check values entering your action. You'll be stunned they are the old ones.
This is weird. Currently if I disable the production of the __referrer[arguments] input field in the \TYPO3\CMS\Fluid\ViewHelpers\FormViewHelper::renderHiddenReferrerFields() method, everything works properly. How do I solve this? Please help.
Where things go wrong:
Here: \TYPO3\CMS\Extbase\Mvc\Controller\ActionController::forwardToReferringRequest() . In this method, arguments are sought from __referrer internal arguments instead of the submitted values. Normally, if errors are found, only two elements are found in the arguments form variable: controller for controller name and action for action name. This is because they were submitted originally with the form and they will recycle without changing as long as the validator finds errors. Nothing else will be added to it. This is good... until it validates. When it validates, results are sent directly to the action controller and not through the error controller. When the process goes back to the form, the object or arguments submitted will be added to the form and returned to the user. Remember it validated. When you then send a wrong value next, it goes to the error controller, but the old values (that validated) and were serialized in the __referrer[arguments] are unserialized and forwarded to your action. And that's how you end up with old values in your action. This is because it assumes that the variable carries only two values inside it; the controller and action names only. It's wrong.
Assumption:
Form post values processing seem to be built under the presumption that once a form validates, you won't need it again.
News.
The values you send are sought from extbase arguments and serialized in \TYPO3\CMS\Fluid\ViewHelpers\FormViewHelper::renderHiddenReferrerFields() method, added to the form just before presenting it to you. All TYPO3 has to do is skip your values and let the default values only be serialized. Just saw that the doc section of the function has this:
/**
* Renders hidden form fields for referrer information about
* the current controller and action.
*
* #return string Hidden fields with referrer information
* #todo filter out referrer information that is equal to the target (e.g. same packageKey)
*/
The #todo part is the news. Hope it's done in the next-patch since there are many scenarios where you want to resume the form such as in data entry.
Solution
Easiest solution: Initialize the empty argument in your action and hand the argument to the form. In my case, I use a DTO.
Example
public function accountLoginAction(DTO\Account\LoginDTO $accountLogin=null):ResponseInterface
{
if($accountLogin){
$this->repository->logon();
...
} else{
$accountLogin=DTO\Account\LoginDTO::getNewInstance();
}
$this->view->assign('object', $accountLogin);
return $this->response();
}
Hope it helps someone.
So, I am making a query everything my context API is updated via a form selection update..
So, order of operation is like so.
User makes a change to a form by selecting (one of possible many) from dropdown.
Change updates "context api" which resaturates the parent component.
Because the form key/values changed, I fire a mutation.
Mutation returns a value. So far, great.
But, when I repeat step #1 - #4, another component flickers with that updated value because at some point the "const" that is expecting a value is undefined... THEN, it has a value..
So, like so..
has a value...
...query api call...
has no value
...returns query
has a value
const ProductPage = (props) => {
const { question } = useContextStateWhatever();
/* Queries */
const { data = {}, isFetched } = useProductUpdatePrice({ questions });
const value = derivePriceFromResponse(data.products);
return (
<SomeComponentRendered value={value} />
)
So, you can see between the "old value" and request in query, that the passed "value" will be undefined. Then query returns, updated value.
I was hoping the query will return any previous value, but the "queryKey" changes with every selection of the form. Deep queryKey.
I was hoping I wouldn't have to then put this value into local state from within a useEffect, or use useRef and create hook to hand back "previous" value until new value is ready.... That's not what react-query is for, right? I mean, shouldn't I be able to make a query call whenever the "context api" changes, and not expect this latency diff of undefined. Any strategies to over come this?
Since the "queryKey" is different (mostly for normal form interaction) for each query, I can see how it can't hand back a previous value until it resolves etc.. any ideas?
Any thoughts?
I think the keepPreviousData: true option is what you are looking for. If the query key changes, you will the get the data from the previous query key, along with an isPreviousData: true flag. The background update will still happen, and then you’ll get the data for the new query key once it arrives. The query will stay in isSuccess status the whole time.
I would like to avoid the manipulation of the hidden field (__identify) in a form. For example the edit form. If someone goes to the inspector and change the value to another uid then the update action will actually update the manipulated value instead of the original.
Now if someone changes this to 8 then the update action will update the object with the uid 8.
Is there a way to avoid such action?
TYPO3: v9
Mode: Composer Mode
Best regards
Thanks to #Daniel Siepmann (typo3.slack.com) for pointing me to the right direction. So the answer is simple and easy to implement.
TYPO3 uses hmac for internal purposes and has a static function
called hmac under the GeneralUtility class.
Concept:
We create a hidden field in the form with a hmac string based on the uid of the object and a word of your choice. (To make the decryption more difficult for the attacker). Then on the controller we regenerate the hmac with the uid that has been passed via the form arguments to the controller and the word we previously defined. If they match, then the object can be updated. If not, then we redirect the user to another page (Error or list view, it is up to you).
How to use it:
your_extension/Classes/Controller/YourController.php
public function editAction(Object $object)
{
$hmac = GeneralUtility::hmac($object->getUid(), 'yourWord');
$this->view->assign('hmac', $hmac);
$this->view->assign('object', $object);
}
Here we generate the hmac based on the object uid and a word that you can alone specify. Then we pass it to the FrontEnd in order to add it on the hidden field and later to compare it.
VERY IMPORTANT: I would strongly recommend to use a word as well. It must be the same everywhere you use it. For me now the word is yourWord.
your_extension/Resources/Private/Templates/Edit.html
<f:form action="update" name="object" object="{object}" extensionName="ExtensionName" pageUid="{settings.flexform.pages.update.pid}" enctype="multipart/form-data">
<f:form.hidden name="hmac" value="{hmac}" />
{...}
</f:form>
Here we define the hidden field with the hmac value. We are going to compare it in the controller.
your_extension/Classes/Controller/YourController.php
public function initializeUpdateAction() {
$args = $this->request->getArguments();
/*Check if the user has not deleted the hmac hidden field*/
if ($args['hmac']) {
/*Regenerate the hmac to compare it with the one from the $args variable*/
$hmac = GeneralUtility::hmac($args['object']['__identity'], 'yourWord');
if ($hmac !== $args['hmac']) {
$this->redirect('list', 'ControllerName', 'ExtensionName', null, $this->settings['global']['error']['pid']);
}
}
else {
$this->redirect('list', 'ControllerName', 'ExtensionName', null, $this->settings['global']['error']['pid']);
}
}
Here we first evaluate if the hmac exists. The user might have deleted the hidden field to avoid the comparisson. If TYPO3 does not find any hmac in the passed arguments ($args['hmac']) then it will redirect the user to the specified page and the object won't be updated.
If TYPO3 finds a hmac, then generates another hmac with the given uid ($args['object']['__identity']) and the word you generated the previous hmac. If it does not match, that means that the user has manipulated the uid. Then TYPO3 redirects the user to the specified page and the object won't be updated.
All this could be written more elegantly but for the sake of this answer, i tried to make it short.
Best regards
I'm using this construction for my element:
$freetext = $this->CreateElement('textarea', 'freetext')
->setLabel('Comments')
->setAttrib('class','input-textarea')
->setOptions(array('rows' => '2', 'cols'=>'30'))
->addValidator('StringLength', false, array(0,500))
->addFilter('HtmlEntities')
->addFilter('StripTags')
->setRequired(true);
I want to add an "allowEmpty" to this but can't find the correct syntax. I was hoping for something like:
... ->addValidator('allowEmpty', false, true)
But this does not work.
Edit: I've changed the setRequired() to true - I want to allow empty string as an acceptable value on a require field.
Regardless of usage, how do I add this option to my element?
->setRequired(false);
this is enough if you want to allow an empty string and save an empty string to database.
if you want the field to be optional and keep null value in database if nothing is given, add:
->addFilter(new Zend_Filter_Null)
$freetext = $this->CreateElement('textarea', 'freetext')
->addValidator('StringLength', false, array(10,500))
->setRequired(false);
Your code should already do that, the setRequired(false) method do what you're asking for, i.e. if the value is not submitted then validators won't be run.
Do you have any issue with the code you've written, some validation error messages or something else?
Update
I've changed the setRequired() to true - I want to allow empty string as an acceptable value on a require field.
What is the semantic in setRequired(true) and allowing the empty string as a valid value? Or better what do you require if the element can be empty?
What you've asked in the edit is a no sense, because if an element is required it MUST have a value different from the empty string. If you need to accept the empty string as a valid value just use setRequired(false). When you get form values with Zend_Form::getValues() or Zend_Form_Element::getValue() you'll obtain the empty string as result.
Anyway here it's the explanation of setRequired and setAllowEmpty from ZF manual:
Using the defaults, validating an Element without passing a value, or
passing an empty string for it, skips all validators and validates to
TRUE.
setAllowEmpty(false) leaving the two other mentioned flags
untouched, will validate against the validator chain you defined for
this Element, regardless of the value passed to isValid().
setRequired(true) leaving the two other mentioned flags untouched,
will add a 'NotEmpty' validator on top of the validator chain (if none
was already set)), with the $breakChainOnFailure flag set. This
behavior lends required flag semantic meaning: if no value is passed,
we immediately invalidate the submission and notify the user, and
prevent other validators from running on what we already know is
invalid data.
If you do not want this behavior, you can turn it off by passing a
FALSE value to setAutoInsertNotEmptyValidator($flag); this will
prevent isValid() from placing the 'NotEmpty' validator in the
validator chain.
How do I submit a form that can do two different things based on the URI?
For example, if the URI contains a string "new" the form will submit differently than it would if "new" were not in the URI.
I'm having trouble implementing this, as when a form is submitted, it takes the URI of whatever "form_open" says.
Altering the form_open path is probably not the way to do this. How are you using this? Does the person filling out the form affect the "new" string?
What I would do is put a hidden input on the form and set THAT value to "new". Then in the controller, use a GET to take the value of the input form, and do a simple IF / ELSE statement based off the value of that variable.
This way, you could setup several different ways to use the same form - hidden=new, hidden=old, hidden=brandnew, hiddend=reallyold could all process the form values differently, even sending them to different tables in your DB or whatever.
Kevin - I thought I'd done something like this before and I had - here's a quick look:
In routes.php:
$route['some/pathname/(:any)'] = "my_controller/my_function/$1";
Then in mycontroller.php:
function my_function($type)
{
if ($type == "new") {
do this }
elseif ($type == "update)" {
do this }
}