Angular Reactive Form Control числовой и алфавитный валидатор шаблона Проверка не работает

Я создаю настраиваемую реактивную форму из динамического значения 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
  }

angular angular-reactive-forms angular-validator
person balajivaishnav    schedule 15.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я сделал аналогичные попытки создания формы из полезной нагрузки, похоже, что логика добавления валидаторов довольно хороша, вы можете сделать какой-то индикатор для стороны шаблона, который обозначает его как скрытое поле, хотя и динамически показывает Это. Таким образом, со всем этим можно справиться с помощью input type="password".

РЕДАКТИРОВАТЬ:

Похоже, что вы хотите сохранить значение в объекте formControl, но сделать так, чтобы ваш шаблон отображал что-то другое для пользователя (**** foo1, где последние 4 видны, остальные - *)

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

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

person iamaword    schedule 16.08.2020
comment
Если я использую пароль, то есть еще одно требование - показывать только последние 4 символа, а остальные скрыты, этого нельзя достичь с помощью типа пароля, верно?. - person balajivaishnav; 16.08.2020
comment
это не может. Вы можете оказаться в ситуации, когда вам нужна индивидуальная реализация controlValueAccessor: indepth.dev/ - person iamaword; 16.08.2020