验证成功时 TextField 显示错误答案

【问题标题】：TextField showing error when validation is success验证成功时 TextField 显示错误
【发布时间】：2019-11-16 20:20:46
【问题描述】：

我有一个 phoneNumber 的文本字段

当电话号码为 10 位时，我不想显示任何错误，但如果不是 10 位，我想显示错误，但当电话号码为 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,


                  ),
                ),
              ));
        });

【问题讨论】：

标签： flutter dart textfield rxdart

【解决方案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,
),

【讨论】：