Как я могу динамически создать валидатор и привязать к группе форм?

Question

В настоящее время я работаю над угловым проектом вместе с Java-сервером, который обслуживает остальные API.Я хочу выполнить вызов API api, а затем получить объект, который затем передается в пользовательскую функцию валидатора и затем использует этот валидатор в группе форм.Однако это не работает, как ожидалось, из-за использования RxJs

, так что вот мой остальной вызов API от angular js

@Injectable()
export class ModeService {
  get() {
    return this.httpClient
      .get<Mode>(`${this.config.api}/configuredMode`)
      .pipe(shareReplay(1));
  }
}

Мой угловой компонент выглядит следующим образом

export class AccountFormComponent implements OnInit {
     ngOnInit() {
    this.modeService.get().subscribe(
      mode => {
        this.mode = mode;
        this.isConfigurationLoading = false;
        this.emailValidator = emailDomainValidator(this.mode);
      },
      () => {
        this.isConfigurationLoading = false;
      }
    );

    this.formGroup = this.fb.group({
      internal: [
        { value: true, disabled: !this.isTypeEditable },
        [Validators.required]
      ],
      name: ['', [Validators.required]],
      firstName: [
        { value: '', disabled: !this.showAdminFields },
        [Validators.required]
      ],
      lastName: [
        { value: '', disabled: !this.showAdminFields },
        [Validators.required]
      ],
      email: [
        { value: '', disabled: !this.showAdminFields },
        [Validators.required, Validators.email, this.emailValidator]
      ]
}

и мой шаблон выглядит следующим образом:

> <form novalidate [formGroup]="formGroup"
> (ngSubmit)="handleSubmit(formGroup.value)" class="mb-3"
> *ngIf="(!isLoading && !isConfigurationLoading)">   <pc-form-layout>
> 
> </form>

и моя функция проверки

export function emailDomainValidator(configuredMode: Mode): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if (configuredMode.propositionType === PropositionType.CMS) {
      const emailId: string = control.value;
      const emailDomain: string = configuredMode.emailDomain;
      if (!emailId.endsWith(emailDomain)) {
        return { invalidEmail: true };
      }
      return null;
    }
    return null;
  };
}

Однако я получаю сообщение об ошибке при доступе к приложению, взятому из консоли разработчика Chrome.то, что я могу разобрать, находится в emailDomainValidator, сконфигурированный режим не определен, и при вызове offeritionType я получаю эту проблему.

VM30160 AccountFormComponent.ngfactory.js:1312 ERROR TypeError: Cannot read property 'propositionType' of undefined
    at Object.eval [as updateRenderer] (VM30160 AccountFormComponent.ngfactory.js:1323)
    at Object.debugUpdateRenderer [as updateRenderer] (VM28852 core.js:14891)
    at checkAndUpdateView (VM28852 core.js:14005)
    at callViewAction (VM28852 core.js:14351)
    at execComponentViewsAction (VM28852 core.js:14283)
    at checkAndUpdateView (VM28852 core.js:14006)
    at callViewAction (VM28852 core.js:14351)
    at execEmbeddedViewsAction (VM28852 core.js:14309)
    at checkAndUpdateView (VM28852 core.js:14001)
    at callViewAction (VM28852 core.js:14351)

Любая идея, как можно решить эту проблему ???любая помощь ценится и большое спасибо

Answer 1

Он создаст FormGroup после получения ответа (запрос API):

export class AccountFormComponent implements OnInit {
    ngOnInit() {
        this.modeService.get().subscribe(
            mode => {
                this.mode = mode;
                this.isConfigurationLoading = false;

                this.createForm();
            },
            () => {
                this.isConfigurationLoading = false;
            }
        );
    }

    private createForm() {
        this.formGroup = this.fb.group({
            internal: [
                {value: true, disabled: !this.isTypeEditable},
                [Validators.required]
            ],
            name: ['', [Validators.required]],
            firstName: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required]
            ],
            lastName: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required]
            ],
            email: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required, Validators.email, emailDomainValidator(this.mode)]
            ]
        });
    }
}

Если вы хотите сначала создать FormGroup, а затем обновить валидаторы при получении ответа, вы можете попробовать это:

export class AccountFormComponent implements OnInit {
    ngOnInit() {
        this.formGroup = this.fb.group({
            internal: [
                {value: true, disabled: !this.isTypeEditable},
                [Validators.required]
            ],
            name: ['', [Validators.required]],
            firstName: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required]
            ],
            lastName: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required]
            ],
            email: [
                {value: '', disabled: !this.showAdminFields},
                [Validators.required, Validators.email]
            ]
        });

        this.modeService.get().subscribe(
            mode => {
                this.mode = mode;
                this.isConfigurationLoading = false;

                this.formGroup.controls.email.setValidators([
                    Validators.required,
                    Validators.email,
                    emailDomainValidator(this.mode)
                ]);
                this.formGroup.controls.email.updateValueAndValidity();
            },
            () => {
                this.isConfigurationLoading = false;
            }
        );
    }
}