Проблема с передачей объектов из FormBuilder

#angular #typescript #angular-reactive-forms #angular2-formbuilder #angular-formbuilder

#angular #typescript #angular-реактивные формы #angular2-formbuilder #angular-formbuilder

Вопрос:

Поскольку я пытаюсь передать объекты из FormBuilder в другую функцию AbstractControl файла typescript.

Но не может быть выполнено при передаче данных.


Stackblitz Вот фрагменты кода

Main.component.ts

 import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
import { PasswordStrengthValidator } from './PasswordStrengthValidator';

let obj = {};
obj.passwordLength  = 12;
obj.lowercaseNo     = 3;
...

this.passwordForm = this.formBuilder.group({
    password: new FormControl('', Validators.compose([
      Validators.required,
      Validators.minLength(obj.passwordLength),
      Validators.maxLength(30),
      PasswordStrengthValidator
    ])),
  }, {
    validators: this.password.bind(this)
  });
}
  

PasswordStrengthValidator.ts

 import { AbstractControl, ValidationErrors } from '@angular/forms';

export const PasswordStrengthValidator = function (control: AbstractControl): ValidationErrors | null {
    console.log(obj); // object values needs to be displayed here
    ...
}
  

Можно ли добиться замены приведенного выше кода на сам основной компонент или есть какой-либо лучший способ обойти эту проблему

Комментарии:

1. Вопрос не очень понятен. Можете ли вы попытаться установить минимальную воспроизводимую проблему с четкой целью для достижения?

2. @Guilhermevrs Нажмите здесь , пожалуйста, обратитесь к PasswordStrengthValidator.ts и app.component.ts файлам

Ответ №1:

Вы могли бы использовать фабрику:

<

 export const PasswordStrengthValidatorFactory = (passObject: any) => {
  return function(control: AbstractControl): ValidationErrors | null {
    // In console required to display those values in the passObject
    console.log(passObject);

    return null;
  };
};
  
 constructor(fb: FormBuilder) {
    console.log(this.passObject);
    this.myForms = fb.group({
      password: [null, Validators.compose([
        Validators.required, Validators.minLength(8), PasswordStrengthValidatorFactory(this.passObject)])]
    });
  

Ссылка на stackblitz

Комментарии:

1. Отлично !… Я вызвал this.myForms = fb.group({... внутри другой функции, потому что она переопределит начальное значение пустым массивом. С помощью await amp; async можно ли вызвать этот метод после получения любого ответа / завершения другим методом, скажем, этот метод инициализирует значение параметра перед вызовом this.myForms.. внутри другого метода, вызываемого в последовательности с помощью await amp; async