Question

角度：有条件地触发选择性表单验证

我正在使用带有验证的反应性表单-“必需”以及其他诸如表单字段的min，max等。表单中有两个按钮-“保存”和“提交”。保存和提交按钮上的事件会将数据保存到中间状态，并根据后端逻辑分别提交。

对于“提交”按钮，我已禁用它，直到通过将属性绑定禁用属性设置为表单的无效状态，表单才有效。对于“保存”按钮，根据除“必需”验证以外定义的验证，如果字段无效，则需要禁用它。这是为了检查是否输入了无效的输入。

例如，考虑以下形式

this.registerForm = this.formBuilder.group({
    name: [''],
    email: ['', [Validators.required, Validators.email]],
})

在这种情况下，如果在字段中输入了无效的输入，则需要禁用该按钮，但是如果将其保留为空白，则需要启用该按钮，即忽略“必需”验证。要禁用另一个按钮（即“提交”按钮），需要“必需”验证。

如何实现对不同按钮的选择性验证？

Answer 1

因此，基本上，我已经使用两种不同的方法来实现它，因为您仅在email字段中具有验证器，因此您可以直接对其进行检查，此外，您还可以检查其确切存在哪些错误，这就是我所要解决的问题已使用：

  get isSaveValid(): boolean {
    let emailControl = this.registerForm.get('email');
    return emailControl.valid || 
      emailControl.hasError('required') &&
      Object.keys(emailControl.errors).length === 1;
  }

  get isSubmitValid(): boolean {
    let emailControl = this.registerForm.get('email');
    return emailControl.valid;
  }

和绑定：

  <button [disabled]="!isSaveValid">Save</button>
  <button [disabled]="!isSubmitValid">Submit</button>

IsSaveValid()仅在true有效或有emailControl错误且是唯一错误时required。因此，换句话说，用户将能够保存绕过所需的约束，但是所有其他验证器将起作用（例如，email）。有一个example on stackblitz。希望有帮助！

Answer 2

另一种方法是在没有必需的验证器的情况下设置整个表单。然后订阅：

this.registerForm.valueChanges.subscribe(val => {
  console.log(`Name is ${val.name} email is ${val.email}.`);
});

每次用户进行任何更改时都会调用它。在这里，您可以执行一个简单的必需检查，如下所示：

if (val.name && val.email) { // simply to get is there any input (for required fields)
    this.submitValid = true;
}

在您的html中，您仍然可以绑定到registerForm.valid，但要保存按钮。对于提交按钮，绑定到“ submitValid”。

角度：有条件地触发选择性表单验证

2 个答案: