I want to know how to make a validation in flutter where IF a TextFormField is filled then when you hit "send" then it doesn't let you go to the next section until all other textformfields must be filled, BUT if one of the TextFormFields is NOT filled when you hit send then it lets you pass to the next section. This is for a job form where a section is NOT mandatory, but only if one field has been filled then it becomes mandatory.
If you have a Form widget that contains all your FormFields (not only text-ones, but also dropdowns and such), the validation occurs on all your fields at once if you write your submit code this way:
final _formKey = GlobalKey<FormState>();
var tecUser = TextEditingController();
var tecPwd = TextEditingController();
[...]
//inside your widget tree...
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: tecUser,
validator: (value) {
//your validation code: return null when value is right
//or a string if there's some error
},
decoration: InputDecoration(hintText: "username".tr()),
),
const SizedBox(height: 10),
TextFormField(
controller: tecPwd,
validator: (value) {
//your validation code: return null when value is right
//or a string if there's some error
},
obscureText: true,
),
const SizedBox(height: 10),
OutlinedButton(child: const Icon(Icons.login), onPressed: () => _submit()),
[...]
void _submit() async {
if (_formKey.currentState!.validate()) {
//all validators returned null, so you can proceed with your logic
} else {
//this happens when at least one of the validators returned a string
//by default, the error string returned by the validators will be displayed
//near each field, so you won't have to worry about handling the error cases and the else here won't even be necessary
}
}
This is an excerpt from an actual login form.
EDIT:
Ok, now I understand what you want to do. You have a group of fields that aren't mandatory, but they instead are mandatory if at least one of them has some value.
You need to assign a different TextEditingController to each of this fields: then, you need to assign a validator to each FormField that does something like this:
//insert all the TextEditingController in a list
var tecList = <TextEditingController>[tec1, tec2...]
//then, set a validator like this
(value) {
bool notMandatory = true;
for (var tec in tecList){
notMandatory = notMandatory && tec.text.isEmpty;
}
if (!notMandatory) return "Fill all fields";
//some other validation here
}
If you use a TextEditingController you can use the .text.isNotEmpty statement an write yourself a litte if function to check everything.
TextEditingController controller = TextEditingController();
if (controller.text.isNotEmpty) {
print("have fun with your new job")
}
Related
I am facing a problem with TextField, since I am working hand in hand with TextEditingController()..text and onChanged, but when entering a new data, it is not reflected in the TextField. I made a print inside the onChanged this same one recognizes a new entry but the value to initiate continues without being updated. Inside the onChanged, I have a function which is in charge of validating what is entered and returning an error if necessary. When I comment the instruction before mentioned the TextField already allows to enter and to update what the user enters.
I hope you can help me, a feedback, tutorial, etc.
I would appreciate it.
TextField Code:
CustomTextField(
controller: TextEditingController()..text = datumAdministrative.name,
placeholder: Constants.selectDate,
helperText: Constants.requiredData,
keyboardType: TextInputType.text,
enable: true,
errorText: validationForm.name.error,
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.sentences,
onChanged: (String value) {
validationForm.changeName(value);
},
);
ValidationForm Code:
void changeName(String value) {
String pattern = r'(^[a-zA-Z ]*$)';
RegExp regExp = new RegExp(pattern);
regExp.hasMatch(value)
? _name = ValidationItem(value, null)
: _name = ValidationItem(null, Constants.nameAdministrativeMessage);
notifyListeners();
}
Try Using : TextController(text: "<Required Text>")
Also does the validation have to be every single time the user enter any word ?
If not, you can try validation everything at the end.
If you are trying to use reactive validation, make sure your CustomTextField is wrapped with the widget which is responsible for rebuilding the UI.. something like Consumer() when using provider package
The problem is probably caused because the TextEditingController object is getting discarded by the rebuilds made by Flutter because you are instantiating the TextEditingController inside a build method. You should save the instance of your controller elsewhere, like in a state object as shown by the official docs or in your case, you can create it and get it from your validationForm.
This is the example in the docs:
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
/// save the [TextEditingController] instance
final TextEditingController _controller = TextEditingController();
...
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(6),
child: TextFormField(
controller: _controller, // User your instance
decoration: const InputDecoration(border: OutlineInputBorder()),
),
),
);
}
}
Possible solution in your case:
CustomTextField(
controller: validationForm.myTextController,
placeholder: Constants.selectDate,
...
I am looking for an example of how to handle forms and validation in best practice with GetX?
Is there any good example of that or can someone show me an example of how we best can do this?
Here's an example of how you could use GetX's observables to dynamically update form fields & submit button.
I make no claim that this is a best practice. I'm sure there's better ways of accomplishing the same. But it's fun to play around with how GetX can be used to perform validation.
Form + Obx
Two widgets of interest that rebuild based on Observable value changes:
TextFormField
InputDecoration's errorText changes & will rebuild this widget
onChanged: fx.usernameChanged doesn't cause rebuilds. This calls a function in the controller usernameChanged(String val) when form field input changes.
It just updates the username observable with a new value.
Could be written as:
onChanged: (val) => fx.username.value = val
ElevatedButton (a "Submit" button)
onPressed function can change between null and a function
null disables the button (only way to do so in Flutter)
a function here will enable the button
class FormObxPage extends StatelessWidget {
const FormObxPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
FormX fx = Get.put(FormX()); // controller
return Scaffold(
appBar: AppBar(
title: const Text('Form Validation'),
),
body: SafeArea(
child: Container(
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(horizontal: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Obx(
() {
print('rebuild TextFormField ${fx.errorText.value}');
return TextFormField(
onChanged: fx.usernameChanged, // controller func
decoration: InputDecoration(
labelText: 'Username',
errorText: fx.errorText.value // obs
)
);
},
),
Obx(
() => ElevatedButton(
child: const Text('Submit'),
onPressed: fx.submitFunc.value, // obs
),
)
],
),
),
),
);
}
}
GetX Controller
Explanation / breakdown below
class FormX extends GetxController {
RxString username = RxString('');
RxnString errorText = RxnString(null);
Rxn<Function()> submitFunc = Rxn<Function()>(null);
#override
void onInit() {
super.onInit();
debounce<String>(username, validations, time: const Duration(milliseconds: 500));
}
void validations(String val) async {
errorText.value = null; // reset validation errors to nothing
submitFunc.value = null; // disable submit while validating
if (val.isNotEmpty) {
if (lengthOK(val) && await available(val)) {
print('All validations passed, enable submit btn...');
submitFunc.value = submitFunction();
errorText.value = null;
}
}
}
bool lengthOK(String val, {int minLen = 5}) {
if (val.length < minLen) {
errorText.value = 'min. 5 chars';
return false;
}
return true;
}
Future<bool> available(String val) async {
print('Query availability of: $val');
await Future.delayed(
const Duration(seconds: 1),
() => print('Available query returned')
);
if (val == "Sylvester") {
errorText.value = 'Name Taken';
return false;
}
return true;
}
void usernameChanged(String val) {
username.value = val;
}
Future<bool> Function() submitFunction() {
return () async {
print('Make database call to create ${username.value} account');
await Future.delayed(const Duration(seconds: 1), () => print('User account created'));
return true;
};
}
}
Observables
Starting with the three observables...
RxString username = RxString('');
RxnString errorText = RxnString(null);
Rxn<Function()> submitFunc = Rxn<Function()>(null);
username will hold whatever was last input into the TextFormField.
errorText is instantiated with null initial value so the username field is not "invalid" to begin with. If not null (even empty string), TextFormField will be rendered red to signify invalid input. When a non-valid input is in the field, we'll show an error message. (min. 5 chars in example:)
submitFunc is an observable for holding a submit button function or null, since functions in Dart are actually objects, this is fine. The null value initial assignment will disable the button.
onInit
The debounce worker calls the validations function 500ms after changes to the username observable end.
validations will receive username.value as its argument.
More on workers.
Validations
Inside validations function we put any types of validation we want to run: minimum length, bad characters, name already taken, names we personally dislike due to childhood bullies, etc.
For added realism, the available() function is async. Commonly this would query a database to check username availability so in this example, there's a fake 1 second delay before returning this validation check.
submitFunction() returns a function which will replace the null value in submitFunc observable when we're satisfied the form has valid inputs and we allow the user to proceed.
A little more realistic, we'd prob. expect some return value from the submit button function, so we could have the button function return a future bool:
Future<bool> Function() submitFunction() {
return () async {
print('Make database call to create ${username.value} account');
await Future.delayed(Duration(seconds: 1), () => print('User account created'));
return true;
};
}
GetX is not the solution for everything but it has some few utility methods which can help you achieve what you want. For example you can use a validator along with SnackBar for final check. Here is a code snippet that might help you understand the basics.
TextFormField(
controller: emailController,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (!GetUtils.isEmail(value))
return "Email is not valid";
else
return null;
},
),
GetUtils has few handy methods for quick validations and you will have to explore each method to see if it fits your need.
I'm building an application for the company I'm working for in Flutter. We are using the MVVM (Model, View, ViewModel) architecture with the other developer I'm working with.
I would like to display user data from my ViewModel to my edit form (those data are fetched through our API).
The problem is: the data won't display to my view. I have access to it and I can print it (see screenshots below)...
What I tried so far :
I used initialValue primarily and called, for instance, my 'lastName' variable (but it doesn't show anything)
I tried using a controller for each field. With this method, it shows my user data but I then have a weird keyboard issue where each time I want to type some content, the cursor just goes to the start and deletes the word.
Also, I noticed that my variable can be displayed in a Text() widget.
I'm pretty clueless and I would really love to get an answer on this bug.
class MyAccountViewModel with ChangeNotifier {
String _lastName;
MyAccountViewModel() {
// this._lastName = 'Hardcoded text';
ApiHelper api = new ApiHelper();
api.getUserData().then((Map<String, dynamic>response) {
print(response);
this._lastName = response['last_name'];
});
notifyListeners();
}
String get lastName => this._lastName;
set lastName(String value) {
this._lastName = value;
notifyListeners();
}
Widget editProfileForm(model, BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
initialValue: model.lastName,
),
],
),
);
}
current view
response after the API call
Thanks to the answer I received in this post, I managed to find a working solution.
As advised in the previous comments, I needed to instantiate a controller and bind for instance "lastName" from my api response to controller.text.
Here is a sample code using the MVVM architecture :
class MyAccountViewModel with ChangeNotifier {
TextEditingController _lastNameController;
MyAccountViewModel() {
_lastNameController = new TextEditingController();
ApiHelper api = new ApiHelper();
api.getUserData().then((Map<String, dynamic> response) {
this._lastNameController.text = response['last_name'];
notifyListeners();
});
}
TextEditingController get lastName => this._lastNameController;
set lastName(TextEditingController value) {
this._lastNameController = value;
notifyListeners();
}
}
Widget editProfileForm(model, BuildContext context) {
return Form(
key: _formKey,
child: TextFormField(
controller: model.lastName,
),
);
}
#Metr0me, have you tried using controller to update the value? It could look something like this,
Initialize the controller as final lastNameController = TextEditingController();
Assign text value to the controller when you have your model instance as,
MyAccountViewModel model = new MyAccount.....
lastNameController.text = model.lastName;
setState(() {}); //Refresh if you need to
Assign lastNameController to your form field as,
child: Column(
children: <Widget>[
TextFormField(
controller: lastNameController,
),
],
)
Set the data to the text field
setState (() {
lastNameController.text = model.lastName ;
});
Assign Controller to your textform field
TextFormField(
controller: lastNameController,
),
I have 3 TextFormFields for inputting of telephone numbers on a Flutter Form (daytime, evening and mobile).
Validation for each TextFormField (in the validator:) allows a blank string to be input.
But I don't want the form to be saved unless there is at least one phone number entered.
formKey.currentState.validate will obviously validate all individual fields as being valid.
So is there a simple way in the framework to cross validate all the TextFormFields and display an error without having to write individial validators for each TextFormField and include references to specific fieldnames (which I regard as being a bit of a dirty hack) e.g.
String _validatePhoneNumber(String value) {
// dirty bit - means I have to write a separate validator for each TextFormField rather than use a generic validator
if (value.isEmpty && this.eveningNumber.isEmpty && this.mobileNumber.isEmpty)
return 'At least one number must be included';
if (value.isEmpty) return null;
if (_invalidNumber(value))
return 'Enter a valid phone number';
return null;
}
You should add a TextEditingController to each TextFormField, that way you can check the value of each field when you submit your form.
For example:
class MyForm extends StatefulWidget {
#override
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
TextEditingController first = TextEditingController();
TextEditingController second = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Form(
key: _formKey,
child: ListView(
children: <Widget> [
TextFormField(
controller: firstController
// rest of your stuff
)
// rest of your text fields using subsequent controllers
// secondController, thirdControler...
]
)
)
)
}
}
Then whenever you want to check it's value you just call firstController.text or better if you want to know if it's empty you just call firstController.text.isEmpty
In the flutter_flux example when we commit a new message, the _currentMessage is emptied but the TextField does not reflect that changes.
This is the code in the store:
triggerOnAction(commitCurrentMessageAction, (ChatUser me) {
final ChatMessage message =
new ChatMessage(sender: me, text: _currentMessage);
_messages.add(message);
_currentMessage = '';
});
The view uses a TextEditingController as a controller for the TextField Widget so I understand why it is not updated.
How can we empty the TextField from the Store with flutter_flux?
EDIT: The flutter_flux example has been updated since I posted this answer, and it now correctly discards message in the TextField but in a better way. You should check it out.
I think the correct way would be to move the TextEditingController to the ChatMessageStore, instead of simply keeping the currentMessage in that store. Then you would be able to empty the text field by calling clear() on the TextEditingController.
Generally speaking, the state values which would normally be kept in FooState in vanilla flutter would go into a Store when using flutter_flux. Since you would normally create and keep a TextEditingController in a State, I think it's more natural to keep it in a Store anyways.
The updated ChatMessageStore would look something like this:
class ChatMessageStore extends Store {
ChatMessageStore() {
triggerOnAction(commitCurrentMessageAction, (ChatUser me) {
final ChatMessage message =
new ChatMessage(sender: me, text: currentMessage);
_messages.add(message);
_msgController.clear();
});
}
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _msgController = new TextEditingController();
List<ChatMessage> get messages =>
new List<ChatMessage>.unmodifiable(_messages);
TextEditingController get msgController => _msgController;
String get currentMessage => _msgController.text;
bool get isComposing => currentMessage.isNotEmpty;
}
Note that we no longer need the setCurrentMessageAction, as the TextEditingController would take care of the text value change itself.
Then, the msgController defined in ChatScreen widget could be removed and the _buildTextComposer could be updated accordingly.
Widget _buildTextComposer(BuildContext context, ChatMessageStore messageStore,
ChatUserStore userStore) {
final ValueChanged<String> commitMessage = (String _) {
commitCurrentMessageAction(userStore.me);
};
ThemeData themeData = Theme.of(context);
return new Row(children: <Widget>[
new Flexible(
child: new TextField(
key: const Key("msgField"),
controller: messageStore.msgController,
decoration: const InputDecoration(hintText: 'Enter message'),
onSubmitted: commitMessage)),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 4.0),
child: new IconButton(
icon: new Icon(Icons.send),
onPressed:
messageStore.isComposing ? () => commitMessage(null) : null,
color: messageStore.isComposing
? themeData.accentColor
: themeData.disabledColor))
]);
}
Hope this helps.