I want to change validator alloy-ui messages like "this field is required" by using a hook or other methods, but I cant find those messages location??
You can override /html/js/liferay/form.js in some hook and change line
required: Liferay.Language.get('this-field-is-required')
And provide your custom language key for it.
If you want to change this language label for whole portal, then in some hook override Language properties and modify label for key this-field-is-required
HTH
You can use something like this:
var formValidator = new A.FormValidator({
boundingBox: '#<portlet:namespace/>yourForm',
rules: {
<portlet:namespace/>yourInput: {
required: true,
baseChars: true
}
},
fieldStrings: {
<portlet:namespace/>yourInput: {
required: 'Your custom required message'
}
},
showAllMessages: true
});
Then if you want to test if your form is valid just use:
if (formValidator.hasErrors()) {
return false;
} else {
//your code
}
You can replace required: 'Your custom required message' by Liferay.Language.get('your-required-custom-message')
Related
How to validate Textinput correclty? I want to validate my form correctly with custom form validation and after validation display errors in Text component, but how? Please, guys show me example!
install react-native-snackbar to show error messages.
import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';
import Snackbar from 'react-native-snackbar';
export default class LoginPasswordScreen extends Component {
constructor(props) {
super(props);
this.state = {
password: ''
}
}
validate = () => {
//include your validation inside if condition
if (this.state.password == "") {
() => {
setTimeout(() => {
Snackbar.show({
title: 'Invalid Credintials',
backgroundColor: red,
})
}, 1000);
}
}
else {
Keyboard.dismiss();
// navigate to next screen
}
}
render() {
return (
<View>
<TextInput
returnKeyType="go"
secureTextEntry
autoCapitalize="none"
autoCorrect={false}
autoFocus={true}
onChangeText={(password) => this.setState({ password })}
/>
<TouchableOpacity>
<Text onPress={this.validate}>Next</Text>
</TouchableOpacity>
</View>
);
}
}
Every field, you have to do a comparison and show the error message and as I see there is no direct form validation even though there is form component available in react native.
In One of my react native project, I added a form and later on click of Submit, I had written one validate function to check all my inputs.
For this, I used one nice javascript library-
npm library- validator
And for showing error message, you can use, Toast, ALert or Snackbar
Would be nice if you provide some thoughts or code on how you would think it can be approached. But the way i did it was pretty simple, on my component state i got the following object:
this.state = {
loading: false,
username: {
text: '',
valid: false
},
password: {
text: '',
valid: false
},
isLoginValid: false
};
Then on the TextInput for username, i would first, bind its value to this.state.username.text, also, during onChangeText I just do a simple validation of the field, if the form is quite big, you may have a switch(fieldtype) where you have for each field, what treatment you want to apply a.k.a validation.
onChangeText={ (text) => { this.validateInput(text, 'username')}} (username would be the form input on the state object)
For instance, for username you want only to be length != 0 and length <= 8 characters, for email you may run a RegExp() with the email validation and also its length, for password a different logic, etc... after that i just simply save the state for that field input and if it's valid or not. Like this:
validateInput(text, fieldname) {
let stateObject = {
text: text,
valid: text.length !== 0
}
this.setState({ [fieldname]: stateObject }, () => {
this.checkValidation();
});
}
In checkValidation I check for all the input fields and if every one is valid, i set formValid to true.
This formValid would for example, allow the user to tap on the "Login" button otherwise it applies an opacity of 0.5 to it and disables it.
The rest you may guess, is just playing around with the valid variables of each field to what you want to display and what not.
In a Register form I also added an X or a "Tick" icon if the input text field is ok or not. Let your imagination guide you.
Hope it helps.
I have a custom Ng2 component a I am using the Model-Driven approach.
<form [ngFormModel]="myForm" class="layout vertical relative">
<my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>
So inside my custom component I have all the logic I need but I can't find a way to get a reference to the ngControl to set it to valid or invalid from inside my custom component.
You can check this link for a working example: https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore
Some key aspects:
You need to implement ControValueAccessor.
export class Datepicker implements ControlValueAccessor {
Inject in your component the ngControl and register it:
constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;
From within your component you should have a form that validates the field so you can subscribe to emit the correct value or set the error of the parent ngControl form.
this.dateForm = builder.group({
dateControl: ['', Validators.compose([Validators.required, CustomValidators.frenchDate])],
});
this.dateForm.valueChanges
.subscribe((val) => {
if (this.dateForm.valid) {
this.onChange.emit(this.dateToTimestamp(val.dateControl));
} else {
this.ngControl.control.setErrors({ "wrongDate": true });
}
});
this.myForm.controls['currentValue']....
but there is currently no way to explicitely set it to valid or invalid.
You can define a validator and change the criteria so it marks the control invalid.
See for example https://github.com/angular/angular/issues/4933
How to set VALID or INVALID on any formGroup
// Where this.form === FormGroup;
// FormGroup can be deeply nested, just call at the level you want to update.
// That level should have direct access to base FormControls
// Can be done in a validator function;
this.form.get('name').setErrors({required: true});
// => this.form.get('name').invalid === true;
// Perhaps on Submit, click, event NOT in validator function
Object.entries(this.form.controls).forEach(([key, ctrl]) => {
ctrl.updateValueAndValidity();
});
// => this.form.get('name').invalid === false;
// => this.form.get('name').valid === true;
// => this.form.get('name').errors === null;
How do I set the type of MessageBox based on a variable?
For example I have a warning MessageBox:
MessageBox.warning("My Message", {
...
});
But, say for example I only want to display a warning MessageBox if a variable 'warning' is true, otherwise create a confim MessageBox.
if (warning){
MessageBox.warning("My Message", {
...
});
} else {
MessageBox.confirm("My Message", {
...
});
}
However the above code is totally unmanageable as the body of the message contains a lot of code.
What else can I do?
I see two options:
As the MessageBox methods only do a MessageBox.show with some settings preset, you could just use show and redo those settings.
You can use a different notation of JavaScript to call different functions:
var method = warning ? "warning" : "confirm";
MessageBox[method]("My Message", {
...
});
In angular2 I want to trigger Validators for some controls when a another control is changed. Is there some way that I can just tell the form to re-validate? Better still, can I request validation of specific fields?
Example:
Given Checkbox X and input P.
Input P has a validator that behaves differently based on the model value of X.
When X is checked/unchecked I need to invoke the validator on P. The Validator on P will look at the model to determine the state of X and will validate P accordingly.
Here's some code:
constructor(builder: FormBuilder) {
this.formData = { num: '', checkbox: false };
this.formGp = builder.group({
numberFld: [this.formData.num, myValidators.numericRange],
checkboxFld: [this.formData.checkbox],
});
}
this.formGp.controls['checkboxFld'].valueChanges.observer({
next: (value) => {
// I want to be able to do something like the following line:
this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
}
});
Anybody have a solution? Thanks!
I don't know if you are still looking for an answer, so here is my suggestions:
Have a look at this: Angular 2 - AbstractControl
I think what you could do is following:
this.formGp.controls['checkboxFld'].valueChanges.observer({
next: (value) => {
this.formGp.controls['numberFld'].updateValueAndValidity();
}
});
This should trigger and run the validators. Furthermore the state gets updated as well. Now you should be able to consult the checkbox value within your validator logic.
Validaton-Guide
FormControl Documentation
with my ControlGroup I do this because I have errors divs checking if touched
for (var i in this.form.controls) {
this.form.controls[i].markAsTouched();
}
(this.form is my ControlGroup)
With the help of this blog
blog link
I have came across a solution with the combine of Nightking answer
Object.keys(this.orderForm.controls).forEach(field => {
const control = this.orderForm.get(field);
control.updateValueAndValidity();
});
this.orderForm is the form group
This did the trick for me
this.myForm.markAllAsTouched();
There are more elegant ways of modeling this behavior - for example, putting your state into a ReplaySubject and observing that, and then using async validators observing the state - but the pseudo-coded approach below should work. You simply observe the value changes in the checkbox, update the model as appropriate, then force a re-validation of the numberFld with the updateValueAndValidity cal.
constructor(builder: FormBuilder) {
this.formData = { num: '', checkbox: false };
const numberFld = builder.control(this.formData.num, myValidators.numericRange);
const checkbox = builder.control(this.formData.checkbox);
checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
this.formData.checked = bool;
numberFld.updateValueAndValidity(); //triggers numberFld validation
});
this.formGp = builder.group({
numberFld: numberFld,
checkboxFld: checkbox
});
}
You can trigger validation in this way:
this.myform.get('myfield').updateValueAndValidity();
static minMaxRange(min: number, max: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
if (Validators.min(min)(control)) { // if min not valid
return Validators.min(min)(control);
} else {
return Validators.max(max)(control);
}
};
}
Here is another similar way that also uses markAsDirty and updateValueAndValidity, particularly good if you use angular material where markAsTouched is not enough.
export function forceValidation(form: AbstractControl) {
if (form instanceof FormGroup || form instanceof FormArray) {
for (const inner in form.controls) {
const control = form.get(inner);
control && forceValidation(control);
}
} else {
form.markAsDirty();
form.markAsTouched();
form.updateValueAndValidity();
}
}
I've spent a few days reading over all manner of tutorials, MDN entries, and S.O. posts, and I've come to suspect that I'm missing something obvious, but I'm too inexperienced with XPCOM to spot it. I'm about 80% sure there error is somewhere in my custom component (components/fooLogin.js).
Problem: When the add-on initializes (when I call loadData() from chrome/content/foologin.js), I get an error saying:
TypeError: Components.classes['#foo.com/foologinautocomplete;1'] is undefined
Am I maybe trying to create the component before the class has been registered? Is there something else I need to do to register it? Any tips would be appreciated.
Relevant Code: (happy to supply any additional code, if need be)
components/fooLogin.js:
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
function fooLoginAutoComplete(){
this.wrappedJSObject = this;
}
fooLoginAutoComplete.prototype = {
classID: Components.ID("loginac#foo.com"),
contractID: "#foo.com/foologinautocomplete;1",
classDescription: "Auto complete for foo",
QueryInterface: XPCOMUtils.generateQI([]),
complete: function(str){ // Autocomplete functionality will in this function
return null;
}
};
var NSGetFactory = XPCOMUtils.generateNSGetFactory([fooLoginAutoComplete]);
chrome/content/foologin.js:
let fooLogin = {
dataLoaded : false,
searchFilter = null,
...
loadData : function(){
...
try{
alert(1); // This alert fires
this.searchFilter = Components.classes['#foo.com/foologinautocomplete;1']
.getService().wrappedJSObject;
alert(2); // I get the error before this alert
}catch(e){alert(e);}
this.dataLoaded = true;
}
}
window.addEventListener("load", function(){
if(!fooLogin.dataLoaded) fooLogin.loadData();
}
chrome.manifest:
content foologin chrome/content/
content foologin chrome/content/ contentaccessible=yes
skin foologin classic chrome/skin/
locale foologin en-US chrome/locale/en-US/
component loginac#foo.com components/fooLogin.js
contract #foo.com/foologinautocomplete;1 loginac#foo.com
overlay chrome://browser/content/browser.xul chrome://foologin/content/foologin.xul
In your chrome.manifest, you have this:
component loginac#foo.com components/fooLogin.js
contract #foo.com/foologinautocomplete;1 loginac#foo.com
and in fooLogin.js you have:
classID: Components.ID("loginac#foo.com"),
loginac#foo.com is not a valid class ID for a component.
They have to be of the form:
{00000000-0000-0000-0000-000000000000}
Only add-ons can have a foo#bar.com format.