[Widget] TextField, TextFormField (validate)

우선 TextField 와 TextFormField의 다른 점은 바로 FormKey를 사용해서 validate를 check 할 수 있냐 없냐이다.

 

코드를 통해 어떻게 Validate를 처리하는지 알아보자

 

어떻게 validate를 처리할까?

---

필요한건 우선

 

- GlobalKey<FormState> key 

- Form widget

- validate property

 

@override
  Widget build(BuildContext context) {
    return DefaultAppbarLayout(
      child: Form(
        key: this.formKey,
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              renderTextFormField(
                label: '이름',
                onSaved: (val) {},
                validator: (val) {
                  if(val.length < 1) {
                    return '이름은 필수사항입니다.';
                  }

                  if(val.length < 2) {
                    return '이름은 두글자 이상 입력 해주셔야합니다.';
                  }

                  return null;
                },
              ),
              renderTextFormField(
                label: '이메일',
                onSaved: (val) {
                },
                validator: (val) {
                  if(val.length < 1) {
                    return '이메일은 필수사항입니다.';
                  }

                  if(!RegExp(
                      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')
                      .hasMatch(val)){
                    return '잘못된 이메일 형식입니다.';
                  }

                  return null;
                },
              ),
              renderTextFormField(
                label: '비밀번호',
                onSaved: (val) {},
                validator: (val) {
                  if(val.length < 1) {
                    return '비밀번호는 필수사항입니다.';
                  }

                  if(val.length < 8){
                    return '8자 이상 입력해주세요!';
                  }
                  return null;
                },
              ),
              renderTextFormField(
                label: '주소',
                onSaved: (val) {},
                validator: (val) {
                  if(val.length < 1) {
                    return '주소는 필수사항입니다.';
                  }
                  return null;
                },
              ),
              renderTextFormField(
                label: '닉네임',
                onSaved: (val) {},
                validator: (val) {
                  if(val.length < 1) {
                    return '닉네임은 필수사항입니다.';
                  }
                  if(val.length < 8) {
                    return '닉네임은 8자 이상 입력해주세요!';
                  }
                  return null;
                },
              ),
              renderButton(),
            ],
          ),
        ),
      ),
    );
  }

 

해당 코드와 같이 validator로 바로바로 맞는 값을 입력했는지 확인할 수 있다.

 

버튼을 클릭할 때에는 validate 한지를 확인해주면 된다.

 

Validate 확인하기!

 

formkey.currentState.validate() 가 TRUE이면 유저가 정확한 값을 입력했다는 뜻이다.

renderButton() {
    return RaisedButton(
      color: Colors.blue,
      onPressed: () async {
        if(this.formKey.currentState.validate()){
          // validation 이 성공하면 true 가 리턴돼요!
          Get.snackbar(
            '저장완료!',
            '폼 저장이 완료되었습니다!',
            backgroundColor: Colors.white,
          );
        }

      },
      child: Text(
        '저장하기!',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }

 

유저가 값을 제대로 입력한 것을 알았으니 그 값을 변수에 저장해야 할 것이다. 

 

formKey.currentState.save() 

 

해당 명령어를 사용하면 유저가 입력한 TextEditingController의 TEXT 값을 저장할 수 있다.

validate 한 것을 확인하고 저장하면 된다.

renderButton() {
    return RaisedButton(
      color: Colors.blue,
      onPressed: () async {
        if (this.formKey.currentState.validate()) {
          // validation 이 성공하면 true 가 리턴돼요!
          
          // validation 이 성공하면 폼 저장하기
          this.formKey.currentState.save();
          
          Get.snackbar(
            '저장완료!',
            '폼 저장이 완료되었습니다!',
            backgroundColor: Colors.white,
          );
        }
      },
      child: Text(
        '저장하기!',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }

 

 

꿀팁  - autoValidateMode

---

여기에서 한가지 유용한 팁을 드린다면 TextFormField 에 

autovalidateMode 를 AutovalidateMode.always 로 지정해보세요!

그럼 저장하기 버튼을 누르기 전에 각 TextFormField 가 자동으로 validation 을 진행하는걸 볼 수 있습니다.

 

 

[참고링크]

🔗 https://blog.codefactory.ai/flutter/form/

Form 으로 손쉽게 여러개의 텍스트필드 상태관리하기!