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

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

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

对于Submit按钮，我已通过将disabled属性绑定到表单的invalid状态来禁用它，直到表单有效为止。对于Save按钮，如果根据定义的验证字段无效，则需要禁用它，但“required”验证除外。这是为了检查是否输入了任何无效输入

例如，考虑以下表格

this.registerForm = this.formBuilder.group({
    name: [''],
    email: ['', [Validators.required, Validators.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（）

仅当

emailControl

有效时，或当它有

必需的

错误并且是唯一的错误时，才

为true

。所以，换句话说，用户将能够绕过所需的约束进行保存，但所有其他验证器都可以工作（例如

电子邮件

）。

---

有一个问题。希望有帮助

因此，基本上我使用了两种不同的方法来实现它，因为您只在

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（）

仅当

emailControl

有效时，或当它有

必需的

错误并且是唯一的错误时，才

为true

。所以，换句话说，用户将能够绕过所需的约束进行保存，但所有其他验证器都可以工作（例如

电子邮件

）。

---

有一个问题。希望有帮助

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

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，但用于保存按钮。对于submit按钮，绑定到“submitValid”。

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

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，但用于保存按钮。对于“submit”按钮绑定到“submitValid”。

谢谢，而且我认为如果我们在多个字段中迭代form.controls会更好。当然，我很高兴它有帮助！只是一个查询，当绑定到disabled属性时，如何以及何时调用函数isSaveValid/isSubmitValid？他们会不断地调用吗？谢谢，而且我认为如果我们在几个字段的情况下迭代form.controls会更好。当然，我很高兴它有帮助！只是一个查询，当绑定到disabled属性时，如何以及何时调用函数isSaveValid/isSubmitValid？他们会不断地调用吗？