Question

我有一个物品清单。我可以添加到此列表中，也可以对此进行编辑（问题在这里）
当我单击该元素时，会出现一个带有反应形式的对话框。
添加工作正常，但是当我尝试编辑多个选择项时为空。
添加时在此处添加代码：

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(''),
  })

在此处进行编辑（用户是包含所有用户详细信息的对象）：

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

  })

我打开表单时显示姓氏名字，但没有显示多个选择项。

通知：例如，当我登录日志fb.conrols（'roles'）时。它具有我设置的值。

这是我的html模板：

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

Answer 1

尝试使用 patchValue

this.form.patchValue(user);

Working Demo

Answer 2

将您的formControl roles更改为roles: this.fb.control([])，因为我有一个数组作为数据。

您可以通过以下方式设置数据：

this.form.setValue(object);

如果使用mat-select，则可以这样放置多个选项：

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

Answer 3

尝试这种方式：考虑userRoles是您的具有ID的角色的数组列表。

在.ts

中

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

.html

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

Answer 4

通过表单控件设置新值

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

  })

Answer 5

尝试这样

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
  });

或者如果用户json和表单模型结构相同，则只需尝试

this.form.patchValue(user);

Answer 6

谢谢您的回答，我今天解决了这个问题。
问题在于物体。我将对象设置为[值]，以便从数据库对象检索到的数据不相等之后。
两个不同的对象（即使它们都具有零个或相同的精确属性）也将永远无法相等地比较。如果需要比较两个对象的属性是否相等。
所以，我将结构更改为接受id并将id发送到后端时将id转换为对象。奏效了。

角反应形式设定值

6 个答案: