I have an FormControl that's declared as an Array of a specific type and I need to populate it with another array of the same type but, I can't figure out how to do so. Here's my code:
profileData = new FormGroup({
// Some Form Controls here...
selectedInterests: new FormControl([], Validators.required)
});
constructor(
public cookieService: CookieService,
public router: Router,
private profileService: ProfileService,
private snackBar: MatSnackBar,
private translateService: TranslateService
) {
this.loadUserProfile();
}
private loadUserProfile() {
this.profileService.loadProfile(this.cookieService.get('UserId')).then(loadedProfile => {
this.profile = loadedProfile;
// Data loads here...
this.profileData.controls['selectedInterests'].setValue(loadedProfile.interests);
// This line gives the error:
// Argument of type 'Interest[]' is not assignable to parameter of type
// 'never[]'.
// Type 'Interest' is not assignable to type 'never'.
this.cookieService.get('UserId');
});
}
I selected only the parts that are important for the question, I can add more info if needed.
HTML:
<mat-form-field>
<mat-label>{{ 'INTEREST.INTEREST' | translate }}</mat-label>
<mat-select formControlName="selectedInterests" multiple>
<mat-option *ngFor="let interest of interests" [value]="interest">
<!-- {{ interest | translate }} -->
{{ interest.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="profileData.controls.selectedInterest.hasError('required')">
{{ 'PROFILE.VALID.INTEREST' | translate }}
</mat-error>
</mat-form-field>
PS: I'm using Angular 16
My comment in an answer
We can check the docs about typed Forms
Another way is use some "bizarro" like
but we loose the capacity of typescript check ours errors