Search code examples
angularangular-reactive-formsangular-formsangular2-formbuilder

Angular reactive form setting values


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.

enter image description here

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>

Solution

  • 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.