角反應形式設置值

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

  })

當我打開表單姓氏名字 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>

Answer 1

嘗試使用patchValue

this.form.patchValue(user);

工作演示

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

通過表單控件設置新值

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 4

像這樣嘗試

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 5

試試這種方式：考慮 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 6

謝謝大家的回答，今天解決了這個問題。
問題是關於對象的。 我將 object 設置為 [value] 因此在從數據庫對象檢索數據后不相等。
兩個不同的對象（即使它們都具有零或完全相同的屬性）永遠不會進行相等的比較。 如果需要比較兩個對象的屬性是否相等。
Sooo 我改變了結構以在發送到后端時接受 id 並將 id 轉換為對象。 有效。