角度:有条件地触发选择性形式验证

Question

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

我正在使用带有验证的反应性形式 - "必需"以及其他形式字段（例如Min，Max等）的其他形式。形式有两个按钮 - "保存"one_answers"提交"。保存和提交按钮上的事件将将数据保存到中间状态，并根据后端逻辑分别提交。

对于提交按钮，我已将其禁用，直到表单通过属性绑定的残疾属性对形式的无效状态有效。对于"保存"按钮，如果根据定义的验证验证，"必需"验证除外，我需要将其禁用。这是检查是否输入任何无效的输入。

例如，请考虑以下表格

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）。在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"。