Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to validate form when textfield is created as separate widget

 return Form(
  key: _formKey,
  child: SingleChildScrollView(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MandatoryFieldWidget("Login", loginIdController, isEdit,
              (String mOnChange) {}, () {}, (String text) {
            if (text.length <= 0)
              return 'Enter valid login id';
            else
              return null;
          },
              'Enter login Id',
              "${20 - loginIdController.text.length} characters left",
              _loginIdFocus,
              true,
              20),
          MandatoryFieldWidget("First Name", firstNameController, isEdit,
              (String mOnChange) {}, () {}, (String text) {
            if (text.length <= 2)
              return 'First Name must be more than 2 characters';
            else
              return null;
          },
              'Enter First Name',
              "${20 - loginIdController.text.length} characters left",
              _firstNameFocus,
              true,
              20),
          MandatoryFieldWidget(
              "Last Name",
              lastNameController,
              isEdit,
              (String mOnChange) {},
              () {},
              (String text) {},
              'Enter Last Name',
              "${20 - loginIdController.text.length} characters left",
              _lastNameFocus,
              false,
              20),
          _getDOBWidget(),
          MandatoryFieldWidget("Email ID", emailIdController, isEdit,
              (String mOnChange) {}, () {}, (String text) {
            if (!EmailValidator.validate(text!)) {
              return 'Enter Valid Email';
            } else {
              return null;
            }
          },
              'Enter email Id',
              "${50 - emailIdController.text.length} characters left",
              emailFocus,
              true,
              50),
          _getCreateButton()
        ]),
  ),
);

I am doing form validation as below:

   if (_formKey.currentState!.validate()) {
      AppUtils.showAppToast("everything is valid");
//    If all data are correct then save data to out variables
      //_form1Key.currentState!.save();
    } else {
//    If all data are not valid then start auto validation.
    }

It is always _formKey.currentState!.validate() is returning true

how to validate form when textfield is created as separate widget
how to validate form when textfield is created as separate widget
how to validate form when textfield is created as separate widget
how to validate form when textfield is created as separate widget
how to validate form when textfield is created as separate widget
how to validate form when textfield is created as separate widget

class MandatoryFieldWidget extends StatefulWidget {
  MandatoryFieldWidget(
      this.name,
      this.controller,
      this.isEdit,
      this.onChanged,
      this.onFieldSubmit,
      this.validator,
      this.hintText,
      this.counterText,
      this.loginIdFocusNode,
      this.isAstrik,
      this.idLength);

  String name;
  TextEditingController controller;
  bool isEdit;

  Function(String text) onChanged;
  Function() onFieldSubmit;
  Function(String text) validator;
  String hintText;
  String counterText;
  FocusNode loginIdFocusNode;
  bool isAstrik;
  int idLength;

  @override
  State<MandatoryFieldWidget> createState() => _MandatoryFieldWidgetState();
}

class _MandatoryFieldWidgetState extends State<MandatoryFieldWidget> {
  EdgeInsetsGeometry margin = const EdgeInsets.fromLTRB(10, 20, 10.0, 0.0);

  void onValueChange() {
    setState(() {
      widget.controller.text;
    });
  }

  @override
  void initState() {
    widget.controller.addListener(onValueChange);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: margin,
        child: Column(
          children: <Widget>[
            widget.isAstrik
                ? getMandatoryText(
                    widget.name,
                    Color.fromRGBO(102, 108, 111, 1),
                    FontWeight.normal,
                    1.0,
                    12.0,
                    1,
                    TextOverflow.ellipsis,
                    TextAlign.left)
                : labelWithoutAsterisk(
                    widget.name,
                    Color.fromRGBO(102, 108, 111, 1),
                    FontWeight.normal,
                    1.0,
                    12.0,
                    1,
                    TextOverflow.ellipsis,
                    TextAlign.left),
            TextFormField(
              maxLines: 1,
              maxLength: widget.idLength,
              controller: widget.controller,
              keyboardType: TextInputType.text,
              autofocus: widget.isEdit ? false : true,
              readOnly: widget.isEdit,
              style: AppUtils.textFieldStyle(),
              onChanged: (text) {
                widget.onChanged(text);
              },
              textInputAction: TextInputAction.next,
              focusNode: widget.loginIdFocusNode,
              onFieldSubmitted: (term) {
                // _fieldFocusChange(context, _loginIdFocus, _firstNameFocus);
                widget.onFieldSubmit();
              },
              validator: (String? arg) {
                widget.validator(arg!);
              },
              /*
                 (String? arg) {
               if (arg!.length <= 0)
                 return 'Enter valid login id';
               else
                 return null;
             },*/
              autovalidateMode: AutovalidateMode.onUserInteraction,
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp("[0-9a-zA-Z -]")),
                LengthLimitingTextInputFormatter(widget.idLength),
              ],
              decoration: InputDecoration(
                  hintText: widget.hintText,
                  counterText:
                      "${widget.idLength - widget.controller.text.length} characters left",
                  counterStyle: AppUtils.counterTextStyle()),
            )
          ],
        ));
  }
Tags:

2

Answers


  1. 0

    You can user provider package.
    download from here

    Wrap you MaterialApp widget in the ChangeNotifierProviderWidget

    void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ToDoNotifier toDoNotifier = ToDoNotifier();
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => toDoNotifier,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: ToDoListScreen(
          toDoNotifier: toDoNotifier,
        ),
      ),
    );
  }
}

    create a class with all the form details there, The class should extend changeNotifier

    class ToDoNotifier extends ChangeNotifier {
//variables
//functions
}

    that class will be returned in the create property as shown above,
    with this you can access data from anywhere inside the app,

    for Example,

    Text(toDoNotifier.name),// so are accessing the name variable from the todoNotifier
    Login or Signup to reply.
  2. 0

    In MandatoryFieldWidget change validator:

    From this

    validator: (String? arg) {
            widget.validator(arg!);
          },

    To This

     validator: (value) => widget.validator(value!),

    Or To This

     validator: (String? arg) {return widget.validator(arg!);},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search