问题标签 [flutter-reactive-forms]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1951 浏览

flutter - Flutter - 将表单绑定到模型

我在 Flutter 中使用reactive_forms,这是一个模型驱动的表单库,它从 Angular Reactive Forms 中获得灵感。

使用名为“nickName”的 formControl 添加一个表单相当简单:

我的问题是,将表单控件“nickName”绑定到域模型的属性不是通常的做法和良好的做法吗?因为这是我在 Angular 中工作的另一个代码库中所做的。

我确实有这个表单的域模型(尽管它的字段比表单包含的要多。其余字段在以下页面的表单中设置 - 就像设置向导一样):

我可以像这样创建模型:

但是我现在如何将nickName字段绑定userRegistration到我的表单控件?我期待表单库有一个与字段等效的ngModel字段,以便我在表单控件上设置模型的字段。

或者这不是在 Flutter 中完成的?

示例:https ://angular.io/api/forms/NgModel#using-ngmodel-on-a-standalone-control

0 投票
1 回答
255 浏览

flutter - Flutter 条件渲染 2 个表单 - 将表单值复制到另一个表单

我正在尝试使用 flutter reactive_forms对两种表单进行条件渲染。但是,当我输入一个表单,然后单击将另一个表单呈现在完全相同的位置的按钮时,相同的值也会保留在另一个表单中。唯一改变表单控件标签的东西。这些表格只是彼此重复。我已经尝试了很多方法来使值不重复,但无济于事。我很长一段时间以来最糟糕的编程经历之一。

这是我FormGroup最初用于两种表单的我的,因为我确实希望大多数字段都重复,但并非所有字段,例如“groceryStore”和“restaurant”,都不会在两种表单之间共享。我什FormGroup至尝试为每个具有所有完全唯一的字段名称使用单独FormGroup的... 就像它与其他条件表单字段在页面上的相同位置一样,因此它将保持其值。当我离开页面并返回页面时,我首先查看的表单具有正确的不同值。我的代码:

我的观点:

视图模型:

一种策略 buildFields()

另一个策略 buildFields:

0 投票
1 回答
224 浏览

forms - reactive_forms Flutter - 创建和渲染组

难以弄清楚如何将组作为他们的示例(https://github.com/joanpablo/reactive_forms#groups-of-groups-grin):

我在用着

但抛出错误:

我的目标是获得如下输出:

非常感谢任何指导和建议!

0 投票
1 回答
752 浏览

flutter - 如何在flutter中使用reactive_forms ReactiveFormArray?

我试图在颤动中创建动态字段数组,reactive_forms 是最佳选择。但是没有我需要使用的 ReactiveFormArray 的文档。

做了一些试验和错误,并找到了使用它的方法。下面是答案。

0 投票
1 回答
191 浏览

flutter - 为什么 reactTextFields 在与 FormGroup 不同的类中不能正常工作?

我有一个初始化的类FormGroup

我创建了一个 StatefullWidget 类ReactivePasswordField

我这样做了,因为我希望每个ReactivePasswordField人都有自己的状态来管理显示和隐藏输入视图。问题是当我输入到ReactivePasswordField其他一个有相同的输入时。我的验证器也不起作用。我该如何解决?

ReactivePasswordFields在初始化 FormGroup 的类中使用了我的方法:

0 投票
0 回答
171 浏览

flutter - Flutter/ReactiveForms:如何在 ReactiveTextField 中处理与 TextFormField 中相同的控制器?

我有一个类似主题的问题。这是我的 TextFormField 代码:

我想用 ReactiveTextField 替换它以提高验证性能。我需要那个控制器在这里设置 Provider。这就是我所说的那个类:

将感谢该解决方案,因为在我看来,使用 ReactiveForm 进行验证看起来要好得多:D

0 投票
1 回答
111 浏览

flutter - Flutter Form Field 浮动在顶部

我遇到了颤振形式的问题。

基本上我有 3 个简单的行添加到堆栈中。最后一个包含一个表格。下面有 Adob​​e XD 的“固定”元素,但包含表单的行浮动在屏幕顶部......我希望它排列在前两行的下方。

您可以在下面的屏幕截图中看到问题。表单位于图像顶部,但我希望它位于我想用功能表单字段替换的 2 条白线上方。

表格悬浮在屏幕中间

我哪里错了?我已将表单放在单独的小部件中。

登录页面.dart

登录表单.dart

0 投票
1 回答
965 浏览

flutter - Flutter - Cubit - 加载状态 - 管理到页面的重定向 - 页面的 2 个构建

对不起我的英语我是法国人。

我在 Flutter (dart) 中开发,当我想在表单提交后重定向到页面时,我在使用 Cubit (Bloc) 的代码中遇到了一个奇怪的行为(使用“反应式表单”包,但也使用经典表单)和步骤Cubit 加载状态:我看到对页面的 2 次调用(2 次构建),这会产生一种“颤动”效果,这意味着最终用户会看到界面充电两次。

这是我在 Flutter 中的第一个应用程序。

我创建了一个包含登录表单的应用程序:提交表单后,我打印另一个表单。

在我的应用程序开始时,我使用“auto_route”包,每次在登录过程后单击文本字段时,我都会刷新页面。所以我无法在文本字段内写任何东西。

我在想问题来自“反应式表单”包,所以我向这个包的 github 存储库打开了一个问题:问题已打开

但是因为我没有看到问题出在哪里,所以我回到了我的应用程序的更基本的开发以及管理页面路由的更基本的方法,以便向“反应式表单”包的维护者解释我的问题,一个非常好的人,真的很想帮助我。

但即使是维护者也不明白我为什么会出现这个问题。

现在我在一页中减少了我更简单的代码。

目前,当我在文本字段内单击时,我没有遇到问题,但我看到该界面构建了两次,并且 Cubit 加载状态可能解释了为什么我遇到了最初的问题。

所以现在我试着理解为什么在调试我的原始代码之前会构建两次接口。

我认为我的主要问题是 Cubit 加载状态正在等待同步小部件返回但是当我尝试重定向到另一个页面时它需要一个异步操作(使用“auto_route”包或更简单地使用“Navigator.push()”操作)。

但我不知道如何在等待经典小部件的 Cubit 加载状态中调用 Future。

我试过这个:

所以我认为返回的小部件“return Container()”在 Navigator.push() 再次构建界面之后构建了一次界面。我尝试直接返回“Navigator.push”,但出现错误(因为它不是小部件)。

我真的很感激这个问题的一些帮助。谢谢。

这是我的完整代码(更简单的版本)。

我的 pubspec.yaml 文件:

我的代码:

我的“颤振医生-v”结果:

0 投票
1 回答
141 浏览

flutter - Flutter reactive_forms - 无法清除自定义表单控件

我无法将我的自定义reactive_forms控件设置为 null。当 FormGroup 在字段中没有值时,该值似乎保留在其中。但是在自定义控件生成器中,它具有该字段并表示它具有一个值。控件的绑定与表单不同步。它只发生在我在运行时将我的表单换成另一个表单之后。知道我可以检查什么吗?我已经在调试器中检查我的代码好几个小时了,很明显我在检查错误的东西。表单绝对是空的,并且控件以某种方式具有值。我可以以某种方式强行清空控件吗?form!.resetState({});不起作用。我需要这里的代码builder: (ReactiveFormFieldState<TValue, TValue> field) {field.

自定义控件: