0

我正在从动态 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
  }
4

1 回答 1

0

我已经完成了类似的“从有效负载创建表单”的尝试，看起来添加验证器的逻辑非常合理，您可能希望为事物的模板端制作一些指示符，将其表示为隐藏字段，并动态显示它。这样就可以全部处理了input type="password"。

编辑：

听起来您想要做的是将值保存在 formControl 对象中，但让您的模板向用户显示不同的内容（****foo1，其中最后 4 个可见，其余为 *）

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

我会调查一下，这有点令人困惑，但是那里有一些可靠的教程/stackblitz 示例，可能需要一些挖掘。祝你好运！

于 2020-08-16T04:29:34.893 回答