Angular Mat-select formcontrol select default value graphic

Asked Jul 31 '20 at 09:44

Active Jul 31 '20 at 11:04

Viewed 90 times

I have a form Control in angular 10 form Group/ Form Array, i want edit the ligne with mat-select and mat-option, but its has the good value but graphically, i don't see my value selected.

public onRowEditInit(user,index) {
    console.log(this.getUsersFormGroup(index).controls['role'].value);
    ///{id:2, name:admin}
    this.getUsersFormGroup(index).controls['role'].setValue(user.role);
    this.clonedUser[user.id] = {...user};
  }
  createUser(p): FormGroup {
    return this.formBuilder.group({
      email: [p.email, [Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$"),
        Validators.maxLength(50)]],
      password: ['', Validators.maxLength(20)],
      role: [p.role, Validators.required],
    });
  }

<mat-form-field class="col-md-12 col-sm-12">
                            <mat-label>Role</mat-label>
                            <mat-select placeholder="Role" formControlName="role" [(value)]="rowData.role">
                              <mat-option *ngFor="let r of cbxRole" [value]="r">{{r.name}}</mat-option>
                            </mat-select>
                          </mat-form-field>
                          <div *ngIf="getUsersFormGroup(ri).controls['role'].errors" class="invalid-feedback">
                            <div *ngIf="getUsersFormGroup(ri).controls['role'].errors.required">Role obliqgatoire</div>
                          </div>

asked Jul 31 '20 at 09:44

hhézre

can i see a instance `cbxRole` array? – Hansaka Sandaruwan Jul 31 '20 at 11:01
also need to see the `user.role` value ? – Hansaka Sandaruwan Jul 31 '20 at 11:09
user.role =>{id:2, name:admin} – hhézre Aug 04 '20 at 13:20
cbxRole=> (3) [{…}, {…}, {…}] 0: {id: 1, name: "ADMIN"} 1: {id: 2, name: "VENDEUR"} 2: {id: 3, name: "CLIENT"} length: 3 __proto__: Array(0) – hhézre Aug 04 '20 at 13:21
in your cbxRole the name is in all CAPS. but the user.role is all simple letters.it must both in same case. Or lets say the value must be case sensitive. – Hansaka Sandaruwan Aug 05 '20 at 03:22
i fix case but the problème is the same – hhézre Aug 05 '20 at 07:55
{id: 2, name: "VENDEUR"} – hhézre Aug 05 '20 at 08:03
Did you need more code – hhézre Aug 10 '20 at 08:26

Angular Mat-select formcontrol select default value graphic

0 Answers0