验证成功时 TextField 显示错误

Question

我有一个 phoneNumber

的文本字段

当 phone 数字是 10 位时，我不想显示任何错误，但如果它不是 10 位，我想显示错误，但当 phone 时出现错误number为10位，非10位不报错

以下是我的代码

var phoneValidator = StreamTransformer<String, String>.fromHandlers(
      handleData: (phoneNumber, sink) {
    if (phoneNumber.length == 10) {
      sink.add(phoneNumber);
    } else {
      sink.addError(PHONE_NUMBER_ERROR);
    }
  });

class RequestForLoginBloc with RequestForLoginValidators {
final _phoneNumberController = BehaviorSubject<String>();
Function(String) get phoneNumberChanged => _phoneNumberController.sink.add;
Observable<String> get phoneNumber =>
      _phoneNumberController.stream.transform(phoneValidator);
String get phoneNumberValue => _phoneNumberController.stream.value;
}

我的TextField如下

return StreamBuilder<String>(
        stream: requestForLoginBloc.phoneNumber,
        builder: (context, snapshot) {
          return Theme(
              data: ThemeData(hintColor: Colors.grey),
              child: Container(
                child: TextField(
                  maxLength: 10,
                  keyboardType: TextInputType.number,
                  onChanged: (value) {
                    requestForLoginBloc.phoneNumberChanged(value);
                  },
                  decoration: InputDecoration(
                    hintText: ENTER_YOUR_NUMBER,
                    errorText: snapshot.data,
                    prefix: Padding(
                      padding: const EdgeInsets.only(
                        right: 16,
                      ),
                      child: Text(
                        "+91",

                      ),
                    ),
                    hasFloatingPlaceholder: true,


                  ),
                ),
              ));
        });

Answer 1

您应该将错误传递给 InputDecoration 而不是数据：

decoration: InputDecoration(
    hintText: ENTER_YOUR_NUMBER,
    errorText: snapshot.error, // <- change to error
    prefix: Padding(
        padding: const EdgeInsets.only(
            right: 16,
        ),
        child: Text(
            "+91",
        ),
    ),
    hasFloatingPlaceholder: true,
),

验证成功时 TextField 显示错误

TextField showing error when validation is success

textfield

dart

flutter

rxdart