Блог

Я создаю пользовательскую реактивную форму из динамического значения 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, где видны последние 4, остальные *)

Именно этой роли удовлетворяет пользовательская реализация ControlValueAccessor. Это соединение между элементом поля формы html и фактической моделью формы, которую вы используете для хранения / отправки данных формы.

Я бы изучил это, это немного сбивает с толку, но есть несколько надежных руководств / примеров stackblitz, возможно, потребуется немного покопаться. Желаю удачи!