【问题标题】:Angular Reactive Forms Buttons with different validations具有不同验证的 Angular 反应式表单按钮
【发布时间】:2019-07-12 13:36:19
【问题描述】:

我正在考虑用响应式表单做一个简单的表单。

我想我会遇到的问题是当我在表单上有两个按钮需要不同的验证时。

例如,Andy 向 Bobby 提交请求。然后 Bobby 通过单击批准来批准请求,或者通过单击拒绝来拒绝请求。

但是...拒绝需要填写 cmets 字段。在不向表单添加更多字段的情况下,最好的方法是什么?

它还必须是动态的,需要对每个按钮进行验证的字段可能会发生变化,因此我不能将不同的代码烘焙到按钮上。

我希望这两个按钮都是可点击的,这样用户就可以看到哪些验证得到满足或没有得到满足。

【问题讨论】:

    标签: angular angular-reactive-forms reactive onsubmit angular2-form-validation


    【解决方案1】:

    根据我对您的问题的理解,我看到了两种可能性,这两种可能性都可以使用“反应式表单 api”来处理:

    • 动态添加控件到您的表单(例如:当用户选中“拒绝”时,会出现一个新的评论字段) => 使用 FomGroup 类的 addControl / removeControl 方法

    • 动态添加验证器到已存在的控件(例如:当用户单击“拒绝”提交按钮时,cmets 字段变为必需) => 使用 AbstractControl 类的 setValidators 方法

    另外,修改控件或验证器后不要忘记调用 updateValueAndValidity 方法(AbstractControl 类),否则将无法检测到更改。

    这是一篇关于这个主题的优秀文章: https://netbasal.com/three-ways-to-dynamically-alter-your-form-validation-in-angular-e5fd15f1e946

    【讨论】:

    • 动态添加验证的声音好像对我有用,谢谢!
    猜你喜欢
    • 2019-06-28
    • 2019-05-04
    • 1970-01-01
    • 2020-12-05
    • 1970-01-01
    • 2021-12-06
    • 2019-11-15
    相关资源
    最近更新 更多