To be specific: I have two radio buttons and their ng-model value must be boolean. Since this is not possible with normal html value property I found useful Angularjs ng-value. Problem is when I want to do some validation, when radio button ng-value="false" is selected it recognizes it as an empty ng-model and we have validation error.
Example: http://plnkr.co/edit/lvdNHZoSSN1nM6uLyc0Q?p=preview
Any clue how to tackle this?
This is a bug.
value="true/false" won't work because your radio inputs won't be initialized and checked correctly when your model is loaded, but ng-value="true/false" won't work because "false" selections will cause the form to be invalid.
I was having the same problem and reported it as an issue, but since there's no telling when it will be resolved, I also came up with a workaround: ng-boolean-radio
It basically converts your model's boolean true / false values into string "true" / "false" values, which match your form's string value="true/false" attributes. This will allow the corresponding radio inputs to be checked by default when the model loads. It will also allow you to save "false" values because "false" != false.
Finally, it preserves the boolean datatype by converting the string "true" / "false" values back to boolean true / false before saving them in the model.
I hope that helps!
http://plnkr.co/edit/Y5vDuTug0kvS3Ut58Lz9?p=preview
Problem is in the required attribute.
I believe using ng-required="!user.gender" is what you're looking for.
Edit: it seems that ng-required, while slightly better, still doesn't work fully.
My recommendation is to omit require completely and initialize your model with a default value:
{gender: true} (false will work too).
I had this problem, too. Michael Moussa's directive was very good for debugging what the checkboxe's/radio button's actual modelValue is. As it turned out, a modelValue of false arrived undefined at the checkbox/radio button. Updating (from 1.2.0) to angular 1.2.5 fixed the problem for me.
Related
I am in React 16+, using withFormik for the form.
Its a single field form which on initial use will have an empty string value. I want the initial value to be validated so the user knows they must fill a value.
So blank string "" initial value, i want the error to say "please enter a value" without the user touching or anything. onload.
formik docs claim it can do this thru the built in tools, but the library/docs dont add up.
validateOnMount:
https://formik.org/docs/api/withFormik#validateonmount-boolean
this value does nothing when set to true in my form. There are lots of logged issues of others having the same problems. It seems formik depreciated an old property that used to do this well. i cant find anything to do this without building some type of hack.
how can i have formik run the validation as ssoon as the from mounts.
in case your answer is to disable the "enableReinitialize" property, ive tried this in conjunction with validateOnMount: true and still get nothing.
When you change the field of NgModel, it automatically change model.prisitne to true.
When you submit the form, it does't change the "pristine", no question, this is not a bug.
But in my case, I show errors when "pristine" is true and when I submit the form, I need to show validation errors and I think when you submit the form, we can say that the fields in this form touched, because you can't submit the invalid form. But in Angular2 it works in different way.
So, any way to say that the form controls/fields is touched (pristine = true) in code/component?
let email:AbstractControl = this.frm.form.controls['email'];
Set email "prisitne" true.
email.markAsPristine();
email.markAsTouched();
email.reset();
or
this.frm.reset();
See also https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html
You can use this shorter method to get a control
let email:AbstractControl = this.frm.get('email']);
every form control has its different states attached.
you can check any state through following code,
this.frm.form.controls['email'].pristine;
this.frm.form.controls['email'].touched;
For reference. check out this plunker and click on button.
https://plnkr.co/edit/mJFftirG3ATDpnJRWmKN?p=preview
As of Angular v4.4.5
markAsDirty() removes the control pristine state
markAsPristine() sets the control to pristine state
I found a lot of articles describing that we can disable the error label by adding false to the form.
However, it seems that it is still very clumsy to set it one by one.
Therefore, I would like to ask if we can set a default false value in the initialisers to hide the error label, while we can set a true value when we want to use it?
I am new to ReactiveCocoa, but I think it's very nice and outstanding technique for reducing code complexity. I just started experiencing with the framework, and not everything is clear for me at the moment, so excuse me if my problem can be solved in some obvious way.
In my app I have login view controller with simple form contains two text fields (username and password) and a button. I would like the button to be disabled if any of two text fields is empty. So, I wrote this code:
RAC(self.loginButton, enabled) =
[RACSignal combineLatest:#[self.userTextField.rac_textSignal,
self.passwordTextField.rac_textSignal]
reduce:^(NSString *username,
NSString *password) {
BOOL valid = (username.length > 0 && password.length > 0);
return #(valid);
}];
It's very simple and it's working. The problem is that one of my text fields (the password field) has secureTextEntry and clearsOnBeginEditing properties set to YES. I will try to explain unwanted behavior that I am experiencing with this configuration:
Let's assume that both username and password fields are NOT empty. In this case the button is enabled. When user taps on password field, it becomes first responder (keyboard appears and user can enter his password), but because of clearsOnBeginEditing being set to YES for that field, the previously entered password is cleared from the text field. That's way password field is now empty. The problem is that signal is not being sent, so the button remains enabled, despite the password field is empty.
My first idea to solve this issue (well, more like workaround solution) was to observe isFirstResponder property on password field beside observing text changes. That's way the block that checks if button should be enabled would be called when password field becomes first responder. I don't know if this solution works, because I have no idea how to implement it using ReactiveCocoa. I have looking for creating a signal for isFirstResponder property changes, but without a luck. It might be not the best approach in order to solve this issue, but nothing comes to my mind at this point.
Then, the question is: how to observe isFirstResponder property with ReactiveCocoa?
And more general question: how to observe text field's text changes when clearsOnBeginEditing is set to YES?
UPDATE:
I found out that I can create signal for UIControlEventEditingDidBegin event that should give me substitution of observing isFirstResponder property changes:
[self.passwordTextField rac_signalForControlEvents:UIControlEventEditingDidBegin]
Unfortunately this does not solve the issue. Now I understand that field is cleared AFTER it becomes first responder, and clearing field automatically after it becomes first responder does not send signal for text changes. That's way when validation block is executed it still thinks that password field is not empty, and the button remains enabled despite password field was cleared and it's empty.
Unfortunately the -rac_textSignal only listens for UIControlEventEditingChanged. If UIControlEventEditingDidBegin were added, you'd be all set.
I suppose you could patch this into it and submit a pull request?
- (RACSignal *)rac_textSignal {
#weakify(self);
return [[[[[RACSignal
defer:^{
#strongify(self);
return [RACSignal return:self];
}]
concat:[self rac_signalForControlEvents:UIControlEventEditingChanged|UIControlEventEditingDidBegin]]
map:^(UITextField *x) {
return x.text;
}]
takeUntil:self.rac_willDeallocSignal]
setNameWithFormat:#"%# -rac_textSignal", [self rac_description]];
}
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...