如何解决角反应性表单控件数字和字母模式验证器验证不起作用
Am从动态JSON值创建自定义反应形式,试图隐藏用户在文本框中输入的字符以星号,
示例:假设用户正在输入“ hello world”。
预期输出:**********,当用户分别输入和 每个字符
还将进行模式验证,例如仅字母和数字,
我已经达到了上述的预期输出,但是验证无法按预期进行
编码我尝试过的内容
SetValidations(val: any) {
this.formBuilder.control(val.key);
this.newGeographyForm.addControl(
val.key.toString(),new FormControl('')
);
let validators = this.getValidatorFnArray(val.templateOptions)
debugger
this.newGeographyForm.get(val.key).setValidators(validators)
val.templateOptions.input_mask > 0 ?this.MaskValue(val.key,val.templateOptions.input_mask) : ''
}
MaskValue(formControlVal:any,maskType:any){
const regex = /\S/gi;
const subst = `*`;
this.newGeographyForm.get(formControlVal).valueChanges.pipe(distinctUntilChanged()).subscribe(fVal=>{
const result = fVal.replace(regex,subst);
this.newGeographyForm.get(formControlVal).patchValue( result,{emitEvent: false});
this.newGeographyForm.get(formControlVal).updateValueAndValidity();
})
}
getValidatorFnArray(obj): ValidatorFn[] {
const validators = [];
if (obj.is_mandatory) {
debugger
validators.push(Validators.required);
}
if (obj.min != null) {
debugger
validators.push(Validators.minLength(obj.min));
}
if (obj.max != null) {
validators.push(Validators.maxLength(obj.max));
}
if (obj.regex != null) {
validators.push(Validators.pattern(obj.regex));
}
return validators
}
解决方法
我已经做了类似的“从有效载荷创建表单”的尝试,看起来添加验证器的逻辑听起来很合理,但是您可能希望为模板方面的内容提供一些指示符,不过将其表示为隐藏字段,并动态显示它。这样,就可以全部用input type="password"
来处理了。
编辑:
听起来您想要做的是将值保留在formControl对象中,但让模板显示的内容与用户不同(**** foo1,最后四个可见,其余为*)
这是自定义controlValueAccessor实现满足的确切角色。这是html表单字段元素和您用于存储/发送表单数据的实际表单模型之间的连接。
我会仔细研究一下,这有点令人困惑,但是那里有一些可靠的教程/ stackblitz示例,可能需要一些挖掘。祝你好运!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。