角反应形式设置值答案

【问题标题】：Angular reactive form setting values角反应形式设置值
【发布时间】：2020-04-03 13:52:26
【问题描述】：

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

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

  })

当我打开表单 lastname firstname fio 显示但多项选择项未显示时。

注意：例如，当我控制台登录 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>

【问题讨论】：

多选不显示是什么意思？
多项选择是空的，即使我设置了它们
请提供.html，因为您的问题显然与您的ts文件无关
我添加了html模板
在mat-option：roles.roleFs有什么定义？和user.roles一样吗？

标签： angular angular-reactive-forms angular-forms angular2-formbuilder

【解决方案1】：

谢谢大家的回答，今天我解决了这个问题。
问题是关于对象的。我将 object 设置为 [value]，因此在从数据库对象中检索数据后不相等。
两个不同的对象（即使它们都具有零或完全相同的属性）永远不会相等。如果需要比较两个对象属性的相等性。
所以我在发送到后端时更改了结构以接受 id 并将 id 转换为对象。它奏效了。

【讨论】：

【解决方案2】：

试试这个方法：考虑 userRoles 是您的具有 ids 的角色数组列表。

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

【讨论】：

【解决方案3】：

将您的 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>

【讨论】：

没有添加新用户完美，编辑也。但是当我编辑它时，它不会在多个选择中显示用户的值
我错过了上下文。编辑它是什么意思？多选是什么意思？
我点击我的列表，表格再次出现。此表单必须填写选定的用户数据以进行编辑。
不显示，因为你的formField是字符串类型，不是数组。
你的.html怎么样？

【解决方案4】：

尝试使用 patchValue

this.form.patchValue(user);

Working Demo

【讨论】：

roles: [user.roles] 是一个数组，而不是一个字符串。

【解决方案5】：

通过表单控件设置新值

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

  })

【讨论】：

我一直在这样做，但是选择是空的
可以添加 HTML

【解决方案6】：

这样试试

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

【讨论】：