I have multiple form fields in an angular view that count down characters as the user types. However, I have a button/link that should reset all the form fields and character counts. When clicked, the form is reset but the character counts are not updated to reflect the change. I know there has to be a model connection I am missing here (I'm an angular newbie). I also know it's probably best to rest the form using $setPristine();, but I am unable to get that to work.
Here's what I've got: http://embed.plnkr.co/5SGjqPhYYIZF1qp0QAAT/preview
I'd appreciate any help I can get! Thanks!
The problem is that your reset button isn't updating the Angular model values your character count calculations rely upon.
Instead of using reset on the form element, just clear the model values:
HTML:
<a href ng-click="clearForm()">RESET</a>
Controller:
$scope.clearForm = function() {
$scope.TA3 = '';
$scope.TA4 = '';
}
Revised Plunker
Related
Case:
I have an array of answers which I want to show in the view as radio inputs. When one of the answers is already answered it must be [checked] and if it's [checked] a textarea shows, so far so good.
Next I want to check another radio input and I want the current selected to be deselected and its textarea hidden, then the new selected radio input should be [checked] and it's textarea should show.
I use the FormBuilder and FormArray and have following issues.
I can't use index without intrapolation, I see many examples where the index is used without.
If I select another radio input, first my data disappears and it's not checked and on the second click it get's checked but now both are checked.
- I don't have access to the checked event, I can show it in the view with {{tempVar.checked}} as you can see above, if I use a template variable #tempVar, but I don't have access to it in the textarea below *ngIf="tempVar.checked". If I do use it in the ngIf I get the following error
Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
Questions:
Is this the right approach?
An example of a Reactive Dynamic form with FormBuilder and FormArray with Radio inputs
Here is my code
https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf
I would think using the tags should be reserved for unique identifiers? I wouldn't be surprised if dom renderer will update all elements with the same id.
Not sure if this will help, but you could use an answer view model instead (containing the same data) but that also has a 'checked' property
This way you can be sure that it will behave as you would expect.
e.g.: (in your component.ts)
let answers = this.question.Question.PossibleAnswers
.map(a =>
{ return Object.assign({}, a, { checked: false });
}
);
then in html you use: 'answer.checked' instead of 'radio.checked'
ps: also you could use ng-container instead of span, so you don't have an extra DOM imprint in your html
I need your help. I have an Active Form in my Yii2 application and when I submit my form it shows values (no matter empty or not) of every field of the form to the GET-string so it looks like
domain.com/index?ItemSearch%5Brooms_arr%5D=&ItemSearch%5Bprice_type%5D=& ItemSearch%5Bprice_type%5D=0&ItemSearch%5Barea_from%5D=&ItemSearch%5Barea_to%5D=&... etc.
I need to have cleaner query string which will contain only non-empty params?
For example domain.com/index?rooms_arr=12&price_type=normal.
Please suggest me what is the best way to do this?
This is not the yii2 problem. It is a native html form works like this. If you really do want to exclude all not filled inputs from the query string you could filter all this params via jQuery and set them to disable state, here is the code
$('form').submit(function(e){
var emptyinputs = $(this).find('input').filter(function(){
return !$.trim(this.value).length; // get all empty fields
}).prop('disabled',true);
});
I've seen heaps of questions about this, and all of them seem to be solved by either calling $scope.$apply(), $scope.$digest(), or by triggering the change() method on the input. But I can't seem to get it working with any of those methods. In this fiddle, I can type a name into the box and get the model value to update as I type. But when I click the link, to set the input name to a certain value, I want the model name to update. What do I need to do?
The reason I'm trying to do this is I want to be able to refresh my angular model when a user autofills the form, using the browser autofill or LastPass or similar. Surely there's some angular command to refresh the model from the DOM?
http://jsfiddle.net/PXCUq/
$(function () {
$('#setFirstName').click(function () {
$('input.firstname').val('Test Name');
angular.element($('input.firstname')[0]).scope().$apply();
// Model still not updated
});
});
Get the scope, then change the ng-model property:
$('#setFirstName').click(function() {
var scope = angular.element($('input').get(0)).scope()
scope.firstname = 'Test Name';
scope.$apply();
});
You can come up with a better jQuery selector. I was only focusing on the Angular part.
Fiddle.
I have divided form in to two sections: sec1 and sec2. Each section is part of a div named as sec1Div and sec2Div. Based upon some selection one of div is hidden. But the problem is that still fields in hidden section are submitted. Please suggest a way so that all of fields in a div are not submitted on submit.
There are several ways to do that. You can hook a function to the form submit's event, or you can remove the name attributes of the fields inside the hidden div. You can also disable the fields, by setting disabled="disabled".
If you are using jQuery, you can do those examples.
To disable all fields in the hidden div, you can do something like:
function hideDiv(el) {
$('input', el).each(function(){
$(this).attr('disabled', 'disabled');
});
$(el).hide();
}
And, the appropriate show div function:
function showDiv(el) {
$('input', el).each(function(){
$(this).removeAttr('disabled');
});
$(el).show();
}
Please remind that this is just a code example. But you can take the idea from that.
The reason this is happening is because the elements are still within the form element. Hiding a div using CSS won't change this - they're still present in the DOM.
It would likely be easiest to add a hidden input field to each div that can be used to identify server side which one you should be processing. You can then simply ignore the data from the hidden form.
If you really must stop the data from being posted, it's a little messy but you could move the hidden div's contents outside of the form element so that the fields won't be submitted. If you wanted to display the div again, you'd then need to move the fields back in. Depending on how complex your CSS is, this could cause problems in some browsers, so I'd advise using my first suggestion.
OK, let's start with the Html.Textbox. It is supposed to contain text read from a file. The file read is based on what the user picks from a dropdown list.
The first time it is fine. The user picks a value from the dropdown list. The controller uses that value to read some text from a file, and returns that text to the view via the view model. Everything is fine.
THen the user picks another value from the dropdown list. The controller reads a new value from a file and returns it via the view model. Debugging to the LINE BEFORE THE HTML.TEXTBOX is set in the view shows that the model contains the correct value. However, the textbox itself still shows the PREVIOUS value when the page displays!
If I switch from Html.Textbox to a plain input, type="text" html control, everything works fine. That's not so hard, but the same thing happens with my dropdown list -- I can't set the selected value in code. It always reverts to whatever was chosen last. Rendering a "select" tag with a dynamically-generated option list is a pain. I would love to be able to use Html.Dropdown.
What am I missing here?? This is such a simple thing in webforms!
When you post a form, the values that are posted are put into ModelState. When the HtmlHelper renders an html iunput element, e.g. Html.TextBoxFor(x => x.FirstName), it'll search various locations to get the value for the textbox... ModelState is before ViewData.Model in the list of locations. So there for, the previously posted value will appear in your textbox.
To fix this you could clear the ModelState value or update the ModelState value. BUT I would kinda view that as a hacky way of getting around the problem.
The real issue has more to do with the flow of the posts and requests. I would personally look into that and maybe implement the PRG (Post Redirect Get) pattern.
HTHs,
Charles
Following on from what Charles/Charlino said:
Model binding updates the ModelState object, which contains validation and model binding errors that are collected during model binding.
Inside an action method, model binding has occurred already to update the model, and generated the ModelState object. If you now update the value on the model inside the action, you must also manually update the model state (since the helpers use it to generate their HTML). Below is an example:
model.CaptchaIsValid = CaptchaService.ValidateAndExpireCaptcha(model.CaptchaAttempt);
if (!model.CaptchaIsValid)
{
ModelState.AddModelError("CaptchaAttempt", "Incorrect - please try again");
}
// I'll clear the value on each attempt, to force them to re-enter a CAPTCHA.
model.CaptchaAttempt = string.Empty;
// Since I updated the model, I must create a new ValueProvider result...
ValueProviderResult clearedValue = new ValueProviderResult(
model.CaptchaAttempt,
model.CaptchaAttempt,
CultureInfo.CurrentCulture);
// ... and update the ModelState's value.
ModelState.SetModelValue("CaptchaAttempt", clearedValue);
The biggest issue I see here is that you are trying to do a postback within MVC. That model is really not supported, and is actually way more trouble than it is worth (as it seems you are finding out). I would recommend using Ajax to update the contents of the dropdown dynamically.