Home > Mobile >  Password & Password Confirm in Flutter Form
Password & Password Confirm in Flutter Form

Time:11-13

I have a form with 2 password inputs , one for password and the second to confirm it. I used passwordController to get the first typed password and value as arguments in my function to get the confirmed typed password

I was trying to do it like that :

final _passwordController = TextEditingController();

final _confirmpasswordController = TextEditingController();

String passwordInputValidator(TextEditingController _passwordController, value) {
if (value =!  _passwordController.text) {
return 'Password doesnt match';
}
}

MakeInput('Type your password', true,
                        nameInputValidator, _passwordController)),
               
                    MakeInput(
                        'Confirm Password',
                        true,
                        passwordInputValidator,
                        _confirmpasswordController)),

Widget MakeInput(label, obscureText, validator, controller) {
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      label,
      style: TextStyle(
          fontSize: 15, fontWeight: FontWeight.w400, color: Colors.white),
    ),
    SizedBox(
      height: 5,
    ),
    TextFormField(
        obscureText: obscureText,
        controller: controller,
        style: TextStyle(color: Colors.white),
        decoration: InputDecoration(
            contentPadding:
                EdgeInsets.symmetric(vertical: 0, horizontal: 12),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
            )),
        validator: validator),

I got this error now and I don't know how to solve it.

_TypeError (type '(TextEditingController, dynamic) => String' is not a subtype of type 
 '((String?) => String?)?')

The error occured on this line of my widget :

validator: validator

CodePudding user response:

You can try using this

Form(
      key: _key,
      child: Column(
      children: [
        TextFormField(
          controller: _password,
          validator: (val) => val!.isEmpty ? "Enter Password" : null,
        ),
        TextFormField(
            controller: _confPassword,
            validator: (val) {
              if (val!.isEmpty) {
                return "Enter Confirm Password";
              }else if(_password.text != _confPassword.text) {
                return "Password Not Matched";
              }else {
                return null;
              }
            }),
        ElevatedButton(
          onPressed: (){
            final form = _key.currentState;
            if(form!.validate()) {
              form.save();
            }
          },
          child: Text("Submit")
        )
      ],
    ),
    )

CodePudding user response:

The validator function needs a string argument,

{String Function(String) validator}

it should be called as validator: (value) => validator, not validator: validator

Try the below code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PasswordsPage extends StatefulWidget {
  const PasswordsPage({Key key}) : super(key: key);

  @override
  _PasswordsPageState createState() => _PasswordsPageState();
}

class _PasswordsPageState extends State<PasswordsPage> {
  final _passwordController = TextEditingController();

  final _confirmpasswordController = TextEditingController();

  String passwordInputValidator(
      TextEditingController _passwordController, String value) {
    if (value != _passwordController.text) {
      return 'Password doesnt match';
    }
  }

  Widget MakeInput(label, obscureText, validator, controller) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: const TextStyle(
              fontSize: 15, fontWeight: FontWeight.w400, color: Colors.black),
        ),
        const SizedBox(height: 5),
        TextFormField(
          obscureText: obscureText,
          controller: controller,
          style: TextStyle(color: Colors.black),
          decoration: InputDecoration(
              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800])),
              border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800])),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
              )),
          validator: (value) => validator,
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Form(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MakeInput('Type your password', true, passwordInputValidator,
                  _passwordController),
              MakeInput('Confirm Password', true, passwordInputValidator,
                  _confirmpasswordController),
            ],
          ),
        ),
      ),
    );
  }
}

you have to implement the form validator.

CodePudding user response:

one of the problems there is that u wrote the relational operator (different) in reverse (=!) and it shoud be (!=). And I think you could use both controllers to validate the input (because they are global), like this.

String? passwordInputValidator(value) {
    if (value == null || _confirmpasswordController !=  _passwordController.text) {
        return 'Password doesnt match';
    return null;
    }
}

I think this way it will work;

  • Related