I am having a slight problem, perhaps someone can help as I have been working on this for over an hour...
In my component file I create a form using a method, then I use another method to make an API call, return some data and set one of the controls of the created array. Here is some of my simplified code, just the ngOnInit
, constructor
and relevant methods
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);
});
}
In my createEditUserForm
method I create the roles property using new FormArray([])
as the value can be a string array that has a maximum of 4 values, for example: ['role 1', 'role 2','role 3','role 4']
. In my getRoles
method I return a string array and try to set it to the form's roles property. However this gives me an error;
"There are no form controls registered with this array yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout)."
So I tried to change .setValue(roles)
to .patchValue(roles)
... but this didn't work, I also tried to create an array of FormControls with each value from the this.apiService.getUserRoles
call and this doesn't work... can someone please tell me how to set the value of the roles form property with the string array returned from the API?