Angular Форма: в этом массиве еще нет элементов управления формой. - PullRequest
Новая
       7

Angular Форма: в этом массиве еще нет элементов управления формой.

0 голосов
/ 24 марта 2020

У меня небольшая проблема, возможно, кто-то может помочь, так как я работаю над этим более часа ...

В моем файле компонента я создаю форму, используя метод, а затем использую другой метод, чтобы сделать вызов API, вернуть некоторые данные и установить один из элементов управления созданного массива. Вот мой упрощенный код, только ngOnInit, constructor и соответствующие методы 

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
          @Inject(MAT_DIALOG_DATA) private data,
          private apiService: ApiService,
          private emailUniqueValidator: EmailUniqueValidator) {
            this.user = data;
}

ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    this.getRoles();
}

createEditUserForm(): FormGroup {
    return new FormGroup({
        name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
        email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
        ),
        companies: new FormControl(this.user.tags.company),
        roles: new FormArray([])
    });
}

getRoles(): any {
        this.apiService.getUserRoles(this.data.id).subscribe(roles => {
        // roles = ['role 1', 'role 2', 'role 3'];
        this.editAccountForm.controls['roles'].setValue(roles);
    });
}

В моем методе createEditUserForm я создаю свойство role, используя new FormArray([]), поскольку значение может быть строковый массив, который имеет максимум 4 значения, например: ['role 1', 'role 2','role 3','role 4']. В моем методе getRoles я возвращаю строковый массив и пытаюсь установить его для свойства роли формы. Однако это дает мне ошибку;

"В этом массиве еще не зарегистрированы элементы управления формой. Если вы используете ngModel, вы можете проверить следующий тик (например, использовать setTimeout)."

Поэтому я попытался изменить .setValue(roles) на .patchValue(roles) ... но это не сработало, я также попытался создать массив FormControls с каждым значением из вызова this.apiService.getUserRoles, и это не работает ... Может кто-нибудь сказать, пожалуйста, как установить значение свойства формы role с массивом строк, возвращаемых из API?

1 Ответ

1 голос
/ 24 марта 2020

Ваш FormArray не инициализирован должным образом и не содержит никакого FormControl, в рамках которого должны быть установлены следующие роли. Вам нужно будет заполнить его начальным значением, как написано в Angular документации Если вы хотите установить их динамически, зависит от количества ролей, см. Код по ссылке https://stackblitz.com/edit/angular-6dzav1

...