颤振表单订阅验证器中的任何验证更改以禁用提交按钮

Question

如何订阅颤振形式的任何验证更改？

我想在任何验证器返回"必需"字符串时禁用表单提交按钮。

我可以通过使用每个TextField.onChanged函数中的_formKey.currentState.validate()调用更新我自己的状态对象来手动同步所有这些。然后将提交设置为默认禁用，当没有人更改文本字段中的任何内容时。

这就是我必须走的路吗？

在角度形式中，我可以订阅验证更改：-P

Answer 1

您可以使用flutter_form_bloc，在此包中，每个表单都是一个bloc，因此您可以订阅任何表单更改，当然，如果所有字段都有效。

若要在任何字段出现验证错误时禁用按钮，必须将BlocBuilder与FormBloc一起使用，然后只需使用isValid属性。

BlocBuilder<SimpleLoginFormBloc, FormBlocState>(
builder: (context, state) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: state.isValid ? formBloc.submit : null,
child: Center(child: Text('LOGIN')),
),
);
},
)

flutter_form_bloc还有其他有用的功能，例如通过轻松响应表单状态来导航的侦听器、异步验证等。阅读文档并查看示例。

这是禁用提交按钮的最小示例：

dependencies:
form_bloc: ^0.7.0
flutter_form_bloc: ^0.6.0
flutter_bloc: ^3.2.0

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
import 'package:form_bloc/form_bloc.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SimpleLoginForm(),
);
}
}
class SimpleLoginFormBloc extends FormBloc<String, String> {
final emailField = TextFieldBloc(
validators: [FieldBlocValidators.email],
);
final passwordField = TextFieldBloc(
validators: [FieldBlocValidators.requiredTextFieldBloc],
);
@override
List<FieldBloc> get fieldBlocs => [emailField, passwordField];
@override
Stream<FormBlocState<String, String>> onSubmitting() async* {
// Login logic...
// Get the fields values:
print(emailField.value);
print(passwordField.value);
await Future<void>.delayed(Duration(seconds: 2));
yield state.toSuccess();
}
}
class SimpleLoginForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider<SimpleLoginFormBloc>(
create: (context) => SimpleLoginFormBloc(),
child: Builder(
builder: (context) {
final formBloc = BlocProvider.of<SimpleLoginFormBloc>(context);
return Scaffold(
appBar: AppBar(title: Text('Simple login')),
body: ListView(
physics: ClampingScrollPhysics(),
children: <Widget>[
TextFieldBlocBuilder(
textFieldBloc: formBloc.emailField,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
prefixIcon: Icon(Icons.email),
),
),
TextFieldBlocBuilder(
textFieldBloc: formBloc.passwordField,
suffixButton: SuffixButton.obscureText,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: Icon(Icons.lock),
),
),
BlocBuilder<SimpleLoginFormBloc, FormBlocState>(
builder: (context, state) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: state.isValid ? formBloc.submit : null,
child: Center(child: Text('LOGIN')),
),
);
},
)
],
),
);
},
),
);
}
}