Angular reactive form setting values

Question

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>

Please provide the .html, because your problem obviously hasn't something to do with your ts file — Ling Vu
– Ling Vu, Commented Dec 10, 2019 at 12:10
In mat-option: What definition has roles.roleFs? Is it the same as user.roles? — Ling Vu
– Ling Vu, Commented Dec 10, 2019 at 12:17

Adrita Sharma · Accepted Answer · 2019-12-10 11:48:54Z

1

Try using patchValue

this.form.patchValue(user);

Working Demo

edited Dec 10, 2019 at 11:48

answered Dec 10, 2019 at 11:29

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ling Vu Over a year ago

roles: [user.roles] is an array, not a string.

Ling Vu · Accepted Answer · 2019-12-10 11:53:24Z

1

Change your formControl roles to roles: this.fb.control([]), because I has an array as data.

You can set the data by:

this.form.setValue(object);

If you use a mat-select, then you can put the multiple options like so:

 <mat-form-field>
    <mat-label>Roles</mat-label>
    <mat-select formControlName="roles">
      <mat-option *ngFor="let role of user.roles" [value]="role">
        {{ role }}
      </mat-option>
    </mat-select>
  </mat-form-field>

answered Dec 10, 2019 at 11:53

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

9 Comments

Medet Kozhabayev Over a year ago

No adding new user works perfectly, editing also. But when I edit it doesn't show values of user in multiple selects

Ling Vu Over a year ago

I miss the context. What do you mean with edit it? And what do you mean with multiple selects?

Medet Kozhabayev Over a year ago

I click to my list, form appears again. And this form must be filled with selected user data to edit.

Ling Vu Over a year ago

It doesn't show, because your formField is a string type, not array.

Ling Vu Over a year ago

How does your .html look like?

|

Santosh Shinde · Accepted Answer · 2019-12-10 11:45:31Z

0

Try like this

this.form.patchValue({
    lastName: user.fio[0],
    firstName: user.fio[1],
    secondName: user.fio[2],
    iin: user.iin
    email: user.email,
    status: user.status,
    systems: user.systems,
    roles: user.roles,
    organization: user.organization,
    userName: user.userName,
    newPassword: user.newPassword,
    newPassword2: user.newPassword2,
    id: user.id
  });

OR if user json and form model structure is same the simply try like this

this.form.patchValue(user);

answered Dec 10, 2019 at 11:45

Santosh Shinde

1,21210 silver badges18 bronze badges

Comments

Ininiv · Accepted Answer · 2019-12-10 11:46:20Z

0

Set the new values through the form control

roles: this.fb.control(user.roles);

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),

  })

edited Dec 10, 2019 at 11:46

answered Dec 10, 2019 at 11:39

Ininiv

1,3257 silver badges12 bronze badges

2 Comments

Medet Kozhabayev Over a year ago

I've been doing this all the time, but selects are empty

Ininiv Over a year ago

Can you add the HTML

Rahul Dapke · Accepted Answer · 2019-12-10 12:16:43Z

0

Try this way : consider userRoles is your array list of roles with ids.

in .ts

this.form.patchValue({
  roles:user.role_id
});

in .html

<select formControlName="roles" class="form-control">
        <option [ngValue]="role.role_id" *ngFor="let role of userRoles"> {{role.role_name}}</option>
</select>

answered Dec 10, 2019 at 12:16

Rahul Dapke

3556 silver badges19 bronze badges

Comments

Medet Kozhabayev · Accepted Answer · 2019-12-11 05:50:54Z

0

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.

answered Dec 11, 2019 at 5:50

Medet Kozhabayev

5310 bronze badges

Collectives™ on Stack Overflow

Angular reactive form setting values

6 Answers 6

1 Comment

9 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

9 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related