时间戳

首页 > 解决方案 > 如何为非必需的 FormGroup 定义必需的 FormControls？

angular - 如何为非必需的 FormGroup 定义必需的 FormControls？

问题描述

在我的应用程序中，我有一个FormGroup不需要提交表单，但是，如果用户尝试填写该组的任何部分，则其中需要存在特定字段，否则该组应被视为无效.

有没有办法为非必填项定义必填字段，FormGroup以便我可以保证数据完整性？

这是我的组

FormGroup({
    officeId: new FormControl("", [Validators.required]),
    fileOwner: fileOwner,
    secondaryOwner: secondaryOwner,
    managedByPrimary: new FormControl(true, [Validators.required])
});

这是我FileOwner FormGroup的，我已将其标记为一个required组

let fileOwner: FormGroup = new FormGroup({
    FirstName: new FormControl("", [Validators.required]),
    LastName: new FormControl("", [Validators.required]),
    IdentificationNumber: new FormControl("", [Validators.required]),
    PhoneNumber: new FormControl(""),
    EmailAddress: new FormControl("")
}, [Validators.required]);

在这里，我试图或多或少地说这个组是提交表单所必需的，而在这个组中FirstName，LastName和IdentificationNumber是必需的。

在SecondaryOwner此之后紧密建模，因为它是具有不同验证要求的相同模型

let secondaryOwner: FormGroup = new FormGroup({
    FirstName: new FormControl("", [Validators.required]),
    LastName: new FormControl("", [Validators.required]),
    IdentificationNumber: new FormControl("", [Validators.required]),
    PhoneNumber: new FormControl(""),
    EmailAddress: new FormControl("")
});

在这里，我没有将组设为必填，但表示需要特定字段。我的意图是或多或少地说，“这个组不是必需的，但如果你填写它，这些是该组被认为有效的必要字段”

我将如何完成这种行为？现在SecondaryOwner实例化是Invalid有意义的。但本质上，除非它的任何一个控件变脏，否则我不希望它被考虑用于验证。

标签： angulartypescriptangular-forms

解决方案

我建议动态更新表格。使表格所需的状态受其他事物的影响。这里有几个想法：

  1. 在没有所需验证器的情况下启动表单并侦听表单事件“脏”或向表单添加单击事件，当用户单击它时，将表单验证器更改为“必需”..

  2. 添加一个单独的输入或按​​钮，用户可以单击说“是的，我想填写此表单”或您喜欢的任何内容，然后如果用户决定填写，您可以在表单上添加一个 ngIf。或者您可以像上面一样处理所需的验证器，但使用此外部输入。

  3. 如果您只想在用户实际输入数据时要求表单，请在更改事件中侦听表单值。添加值时，将表单更新为必需。

在任何一种情况下，您的表单所需功能都可能如下所示：

requireForm() {
    this.myForm.setValidators(Validators.required)
}

您还可以查看这篇关于动态添加验证器的帖子

推荐阅读