角度反应式表单控制数字和字母模式验证器验证不起作用

Question

我正在从动态JSON值创建一个自定义的反应式表单，试图将用户在输入框中输入的字符隐藏为星号符号，

示例：假设用户正在键入“你好世界”。

预期输出：*********，当用户键入每个字符时应该会出现此输出

还将有模式验证，如仅字母和仅数字，

我已经实现了上述预期输出，但验证没有按预期工作

编码我尝试过的内容

 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
  }

Answer 1

我做过类似的“从有效负载创建表单”工作，看起来添加验证器的逻辑很合理，但您可能希望为模板侧的内容制作一些指示符，将其表示为隐藏字段，并动态显示它。这样就可以用input type=“password”来处理。

编辑：

听起来你想做的是在formControl对象中保存值，但让你的模板向用户显示不同的东西（****fo1，其中最后4个可见，其余的是*）

这正是自定义controlValueAccessor实现所满足的角色。它是html表单域元素和您用来存储/发送表单数据的实际表单模型之间的连接。

我会研究它，这有点令人困惑，但有一些可靠的教程/stackblitz示例，可能需要一些挖掘。祝你好运！