Angular:有条件地触发选择性表单验证
Angular: Conditionally trigger selective form validations
Angular:有条件地触发选择性表单验证
我正在使用带有验证的反应式表单 - 'required' 以及表单字段的其他表单,例如最小值、最大值等。表单中有两个按钮 - 'Save' 和 'Submit'。 Save 和 Submit 按钮上的事件会将数据保存到中间状态,并根据后端逻辑分别提交。
对于“提交”按钮,我已将其禁用,直到表单有效,方法是 属性 将禁用属性绑定到表单的无效状态。对于“保存”按钮,如果根据 'required' 验证之外定义的验证字段无效,我需要禁用它。这是为了检查是否输入了任何无效输入。
例如,考虑以下形式
this.registerForm = this.formBuilder.group({
name: [''],
email: ['', [Validators.required, Validators.email]],
})
在这种情况下,如果在字段中输入了无效输入,我需要禁用该按钮,但如果它留空则启用它,即忽略 'required' 验证。 'required' 验证需要禁用另一个按钮,即提交按钮。
如何实现对不同按钮的这种选择性验证?
所以,基本上我是用两种不同的方法实现的,因为你只在 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。希望对您有所帮助!
另一种方法是设置整个表单而无需验证器。那就订阅:
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".
Angular:有条件地触发选择性表单验证
我正在使用带有验证的反应式表单 - 'required' 以及表单字段的其他表单,例如最小值、最大值等。表单中有两个按钮 - 'Save' 和 'Submit'。 Save 和 Submit 按钮上的事件会将数据保存到中间状态,并根据后端逻辑分别提交。
对于“提交”按钮,我已将其禁用,直到表单有效,方法是 属性 将禁用属性绑定到表单的无效状态。对于“保存”按钮,如果根据 'required' 验证之外定义的验证字段无效,我需要禁用它。这是为了检查是否输入了任何无效输入。
例如,考虑以下形式
this.registerForm = this.formBuilder.group({
name: [''],
email: ['', [Validators.required, Validators.email]],
})
在这种情况下,如果在字段中输入了无效输入,我需要禁用该按钮,但如果它留空则启用它,即忽略 'required' 验证。 'required' 验证需要禁用另一个按钮,即提交按钮。
如何实现对不同按钮的这种选择性验证?
所以,基本上我是用两种不同的方法实现的,因为你只在 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。希望对您有所帮助!
另一种方法是设置整个表单而无需验证器。那就订阅:
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".