I have a list of items.
I can add to this list and also edit this(Problem here)
When I click to the element there is dialog box with reactive form.
Adding working correct, but when I try to edit multiple choice items are empty.
Here code when adding :
this.form = this.fb.group({
lastName: this.fb.control(''),
firstName: this.fb.control(''),
secondName: this.fb.control(''),
fio: this.fb.control(''),
iin: this.fb.control('', [Validators.required, Validators.pattern(/^(\d{12})$/)]),
email: this.fb.control('', [Validators.required, Validators.email,]),
status: this.fb.control(''),
systems: this.fb.control(''),
roles: this.fb.control(''),
organization: this.fb.control(''),
userName: this.fb.control(''),
newPassword: this.fb.control(''),
newPassword2: this.fb.control(''),
})
Here when editing (user is object where contains all user details) :
this.form = this.fb.group({
lastName: user.fio[0],
firstName: this.fb.control(user.fio[1]),
secondName: this.fb.control(user.fio[2]),
iin: this.fb.control(user.iin, [Validators.required, Validators.pattern(/^(\d{12})$/)]),
email: this.fb.control(user.email, [Validators.required, Validators.email,]),
status: this.fb.control(user.status),
systems: this.fb.control(user.systems),
roles: this.fb.control(user.roles),
organization: this.fb.control(user.organization),
userName: this.fb.control(user.userName),
newPassword: this.fb.control(user.newPassword),
newPassword2: this.fb.control(user.newPassword2),
id: this.fb.control(user.id),
})
When I open form lastname firstname fio shows but multiple choice items are not showing.
Notice : When I console log fb.conrols('roles') for example. It has values I set.
Here's my html template :
<mat-form-field class="role__input">
<mat-label>{{ 'Роль' | translate }}</mat-label>
<mat-select #mySelect formControlName="roles" required multiple>
<mat-label class="role_label">{{ 'ЕНСИ' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleEnsi" [value]="role">
{{role.nameRu}}
</mat-option>
<mat-label class="role_label">{{ 'ФОРМИРОВАНИЕ СРЕЗОВ' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleFs" [value]="role">
{{role.nameRu}}
</mat-option>
<mat-label class="role_label">{{ 'АДМИНИСТРАТОР' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleAdmin" [value]="role">
{{role.nameRu}}
</mat-option>
</mat-select>
</mat-form-field>
Thank you for all answers, I solved this question today.
Problem was about objects. I set object to [value] so after retrieving data from database objects were not equal .
Two different objects (even if they both have zero or the same exact properties) will never compare equally. If you need to compare the equality of two object's properties.
Sooo I changed structure to accept id and transform id to object when sending to backend. It worked.