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

Question

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

我正在使用带有验证功能的反应式表单——“必需”以及表单字段的最小值、最大值等其他表单。表单中有两个按钮 - “保存”和“提交”。 Save 和 Submit 按钮上的事件会将数据保存到中间状态并根据后端逻辑分别提交。

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

例如，考虑以下形式

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

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

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

Answer 1

另一种方法是设置整个表单而不需要验证器。然后订阅：

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”。

Answer 2

所以，基本上我已经使用两种不同的方法实现了它，因为你只有在 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。希望对您有所帮助！