Question

我有一个带有按钮的嵌套表单组（“确认”），并且我希望父表单在按下子级按钮之前是无效的。但是，似乎验证器是专门为输入而设计的。

是否可以仅在按钮按下或完全不在我的html中的属性上进行表单验证？

我尝试使用以下代码，但感觉好像在吠错树。

像这样的自定义验证器：

function isConfirmedValidator(confirmed: boolean): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (confirmed) {
            return null;
        } else {
            return { "notConfirmed": true };
        }
    };
}

本地道具：

isConfirmed = false;

按钮与之挂钩：

onConfirm = () => {
  this.isConfirmed = true;
}

初始化嵌套形式：

this.nestedForm = this.formBuilder.group({}, isConfirmedValidator(this.isConfirmed));

编辑：我应该在我的HTML中有一个与formControl关联的隐藏字段吗？似乎太hacky，但也许是最干净的方法？

Answer 1

您可以在表单中添加所需的控件，并在用户单击按钮时为其设置值：

TS：

 userForm: FormGroup = this.fb.group({
    name: ['My name', [Validators.required]],
    button: [null, [Validators.required]],
 });

HTML：

<button type="button" (click)="userForm.get('button').setValue(true)">
  Click required
</button>

Here is working example

按钮按下或属性不在html

1 个答案: