按钮按下时的 Angular7 表单验证或 属性 不在 html 中

Question

我有一个带按钮的嵌套表单组 ("Confirm")，我希望父表单在按下子表单上的按钮之前无效。然而，验证器似乎是严格为输入设计的。

是否可以仅按下按钮或根本不在我的 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 的隐藏字段？看起来太老套了，但也许是最干净的方法？

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