Help please,
I tried to fix it without success. I'm using Ionic framework and Angular. I have a form which is opened when I click on a Sidemenu. So the problem is when I add a formControllerName on the input field it modified my design's form. I don't understand why these input can change my form. I imported everything in my module's page where I needed.
my form without formControlName
form_1
my form with formControlName
Form_2
Input
Related
I am wondering, is there way to disable the form submition on enter key press inside one of the input in Vue js. I am currently having simple form with button and one input and i am handling the submit with #submit.prevent="submitFunctionClickFunction"
Try adding #keydown.enter.prevent on the input field.
I have an TextArea with its fields and I need to convert them to a RichTextBox and back on Button clicks using Angular2.
I am using the FroalaEditor plugin to get the RichTextBox. How should I process?
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"
I am using accordion panel with three tabs each tab has required fields for form submission.I want to validate required fields when submit operation is performed. But the validation happens during the tab change and I don't want this functionality, so how to remove this and validate the whole form during form submit. Please give me some guidance.
You should set your accordionPanel not to be dynamically loaded : dynamic="false"
I have two forms, a login form and a register form on the same page and each has its own submit button. If I fill in bad data and click on submit button on register form, I get the form back with errors ( expected). If I now enter sign in details on signin form and click on signin form's submit button, the register form gets submitted.
This is strange behaviour. I am not sure where to start search for this. I am using firefox to test this.
Thanks
Well, you will need to debug it step by step.
Check your form nesting and follow good structure, make sure both form are not overlapping with each other or not being closed properly.
Give you form a proper ID and NAME. Be careful when two forms have the same name From Name Attr.
Based on your structure and your question, make sure you have a different submit buttons for each form and that button is placed within the form nesting.
Same as for the forms, give your submit button a proper unique ID and NAME .
Choose whether you want to submit by your using submit in html, or having JS to submit the form for you JS submit form.
If you are using HTML5, you can separate the button from the FORM. They can run separately. Means dynamic association between the form and it's submit button by having submit button placed anywhere and can submit a form located in different place. Check Association of Controls and Forms & HTML5′s New “form” Attribute.
Please post some code in order for us to have a better understanding of your issue.
Good luck.