Develop Reference

TYPO3 Frontent: Form Action results Page not found

I'm working on TYPO3 migration from 6.2.31 to 8.7.19.
In my templates I'm using a navigationbar which should filter a list of videos based on categories. The navigationbar is a formular:
<f:if condition="{loggedIn}">
<f:then>
<form name="audit_vw_filter" method="post" id="audit_vw_filterForm"
action="?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedMember&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo">
</f:then>
<f:else>
<form name="audit_vw_filter" method="post" id="audit_vw_filterForm"
action="?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedPublic&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo">
</f:else>
</f:if>
...
<f:for each="{categories}" as="category" iteration="i">
<div>
//list the category
<span id="fontRed{category.uid}" class="vw_navigationbarFilter filterLinkCategory" onclick="setActualCategory('{category.name}','{category.uid}')">{category.name}</span>
</div>
...
</f:for>
</f:form>
In JavaScript I declared every category as a submit when click on it.
...
$("#vw_filterForm").submit();
So now the action from my form should be executed and call my 'FrontendVideo' Controller which should give me a feedback in form of a debug.
public function listSelectedMemberAction () {
DebuggerUtility::var_dump("Hello World");
...
}
It seems like the function of the Controller isn't reached.
Instead there is a friendly "Page not found" :/
As Expected the URL is:
http://example.de/.../.../?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedMember&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo
On the old version 6.2.31 it worked fine. So maybe there is a change of how I call a Controller function or maybe a problem with realurl etc....
Thanks in advance!

I found the problem:
In the older TYPO3 versions TYPO3_CONF_VARS['FE']['pageNotFoundOnCHashError'] was set to true by default, so if the cHash is empty the error message is outputed.
So I tend to revert the pageNotFoundOnCHashError to "false" as default value.
to do this go into your
Install Tool > All configuration > Frontend
and change pageNotFoundOnCHashError to false
[FE][pageNotFoundOnCHashError] = false

In Angular, how to get a form in $scope in controller?

Having these two files:
HTML:
<form name="registrationForm" ng-submit="registerUser()">
...
</form>
JS (inside the Angular controller):
$scope.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);
I get the error that Cannot read property 'confirmPassword' of undefined
This leads me to believe that I have no access to the form registrationForm in the controller. Based on this (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) I imagined that I should.
Other solutions that I've seen include passing the form to the controller when the form is submitted, but what I need to do (set custom validation) needs to happen way before that.
Other solution mentioned adding the controller to the form via ng-controller but that changed nothing.
EDIT:
From the website above, is there a reason why in here (https://plnkr.co/edit/ZT0G6ajdbescT72qLKSU?p=preview) $scope.myForm can be accessed, but only inside of the $scope.setEmpty function?

I recommend using the controller itself instead of the $scope provider for this. This was one of the first issues I came across when working with angularjs
In your controller:
function MyController($scope) {
var vm = this;
vm.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);
}
In your form:
<form name="vm.registrationForm" ng-submit="registerUser()">
...
</form>
The only gotcha is that you need to specify the controllerAs property in your route or ngInclude:
ng-include="templates/my-template.html" ng-controller="MyController as vm"
or
when('/my-route', {
templateUrl: 'templates/my-template.html',
controller: 'MyController as vm'
})

You need to add a name attribute to form element.
<form name="registrationForm" ng-submit="registerUser()">
...
</form>

this form must rely on a controller indeed. please take a look at the example:
angular.module("fooApp",[]);
angular.module("fooApp")
.controller("formctl",function(){
this.user={};
this.dosave=function(){
if(this.user.pwd == this.user.confpwd)
alert(this.user.username+" logged");
else
alert("pwd does not match");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="fooApp">
<h1>sample</h1>
<div ng-controller="formctl as ctl">
<form ng-submit="ctl.dosave()">
<label>username</label><br/>
<input ng-model="ctl.user.username" required/><br/>
<label>password</label><br/>
<input ng-model="ctl.user.pwd" type="password" required/><br/>
<label>confirm password</label><br/>
<input ng-model="ctl.user.confpwd" type="password"/><br/>
<input type="submit"/>
</form>
</div>
</div>

You'll want to pass the form into the submit function to pass the entire form into the controller. Use the form name.
<form name="registrationForm" ng-submit="registerUser(registrationForm)">
...
</form>
The other option would be to pass the inputs directly in as params
<form name="myForm" novalidate >
some input: <input type="text" name="sometext" ng-model="myInput">
<input type="submit" ng-click="doAction(myInput)">
</form>
Quick Plunk
https://plnkr.co/edit/s0Al2LTHkvUPoLYNzTpm?p=info
If you're just after the value of the inputs, it's easier to test if you have explicit parameters that you expect on the method instead of dumping in the entire form.

Form inside nested ng-include in angular js

I am using nested ng-includes in my app . Outer one is login screen for different application and inner ng-include includes 2 templates . My login screen is designed in two steps . First email will be checked then the password .
I am having issue in form post . In second template password one when the form is posted , suppose if password not matched then it shows error but my ng-include template is reset to first one . I am not using ng-submit instead action attribute is define which post the form .
Here is my code
Second ng-include
<div ng-include="currTemplate" class="slide"></div>
$scope array contains templates
$scope.templates = ['/Content/app/templates/AddAccount.html', '/Content/app/templates/Login.html'];
When controller loads it is set to 0
$scope.currTemplate = $scope.templates[0];
I have a form in Login template
<form name="form" method="post" action="{{model.loginUrl}}">
in which action attribute is define . When this form posted and results in error my template is changed to AddAccount.html and error is shown. I can't use ng-submit to post form need help ?

Looks like you are doing a full page reload with the post. This will reset all your client side values to their defaults. You need to submit the form as an XHR (ala ng-submit) or return data from the failure that let's you adjust the correct template to show.

Redirecting in Angular using $window.location.href works if invoked directly, but not if called from another function

I'm trying to redirect from my Angular app to a non-angular page. If I have a redirect function on the $scope and invoke it directly from a UI element via ng-click it works as expected. If I call the function from within another $scope function, though, the page reloads or remains as is. I suspect there is a scoping issue here, but I can't tell what it is. I also tried $window.location.assign() and got the same result.
Why is the redirect working one way, but not the other? Thanks!
Link to CodePen
JS
angular.module('myApp',[]);
angular.module('myApp').controller('myCtrl', [ '$scope', '$window', function($scope, $window){
$scope.destination = "http://www.clientsfromhell.net";
$scope.redirectStarted = false;
$scope.redirect = function(target){
$window.location.href = target;
$scope.redirectStarted = true;
};
$scope.wrapperFunction = function() {
var altDestination = "http://www.reddit.com/r/CrappyDesign";
$scope.redirect(altDestination);
};
}]);
HTML
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<ul>
<li>Invoke redirect() directly: <input type="button" value="Direct Invocation" data-ng-click="redirect(destination)" /></li>
<li>Invoke from wrapper function: <input type="button" value="From Wrapper" data-ng-click="wrapperFunction()" /></li>
</ul>
<div data-ng-show="redirectStarted">
Redirect started
</div>
</div>
UPDATE
dfsq was right that my problem was not related to Angular. My app is a .NET application, and there was a form on the master page. Because I was using a button of type=submit, the form was being submitted, which cancels the redirect unless you do a preventDefault() on it. In my debugging, I was using an ng-click function on a header element to do the redirect. That worked fine because it didn't submit the form, but it also led me down the wrong path in thinking it was a scoping problem.

This has nothing to do with Angular. The reason why the wrapper redirect is not working, is that it is using different redirect URL (on reddit domain). This resource has restricted content policy preventing it from being displayed in iframe on different domain pages.
Сorresponding error:
Refused to display 'http://www.reddit.com/r/CrappyDesign' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
The first destination URL doesn't have this limitation, so it works flawlessly.
From documentation about X-Frame-Options:
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a , or . Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

AngularJS validation of asynchronously loaded form

I am building an AngularJS application that includes modal windows which contain forms and are loaded into the DOM asynchronously (when the appropriate button is clicked). The forms work fine, but I cannot properly check if they are valid. Here's an example:
HTML
<div ng-app="myapp" ng-controller="MyCtrl">
<form novalidate name="myform" ng-submit="submitForm(myform)">
<input type="text" required ng-model="myname" />
</form>
</div>
JavaScript
var app = angular.module('myapp', []);
app.controller("MyCtrl", function($scope) {
$scope.submitForm(form) {
if(form.$valid) {
// Do http stuff here
}
};
});
If this form is loaded asynchronously, the form variable has value NaN and form.$valid is undefined. However, if I load it with the rest of the page, it works fine. Does anyone know how to force AngularJS to populate the scope variable for the form? Thanks!

When you include a form using ng-include a childScope is created. The parent and the childScope cant access eachothers scopes. Therefore the .$valid comes up empty.
I had a similiar issue the other day and got a working solution that suited me in this thread:
AngularJS $setValidity on childScope form