如何在Angular表单控件中让PrimeNG InputSwitch显示预选布尔值？

要让对话框弹出时p-inputSwitch显示预选状态，核心是将服务器返回的0/1值转换为布尔值后，同步到表单控件ShowMe上。以下是调整后的代码：

home.component.html（保持原结构即可） #

<form [formGroup]="myForm" (submit)="onSubmitForm()">
  <div>
    <p-inputSwitch
      formControlName="ShowMe"
      (onChange)="test($event)"    
    ></p-inputSwitch>
  </div>
</form>

home.component.ts（关键修改点） #

import { UntypedFormBuilder, Validators } from '@angular/forms';
import { OnInit } from '@angular/core';

export class HomeComponent implements OnInit {
  checked: boolean;

  myForm = this.fb.group({
    ShowMe: [false, Validators.required], // 初始设为false，后续根据服务器数据覆盖
  });

  constructor(
    private fb: UntypedFormBuilder
  ) {}

  ngOnInit() {
    // 模拟从服务器获取数据，实际项目替换为HTTP请求
    const serverShowMeValue = 1; // 示例：服务器返回1，对应开关开启
    this.setInputSwitchPreselectedValue(serverShowMeValue);
  }

  // 转换服务器值并同步到表单控件
  setInputSwitchPreselectedValue(serverValue: number) {
    this.checked = serverValue === 1;
    this.myForm.get('ShowMe')?.setValue(this.checked);
  }

  test(e: any) {
    this.checked = e.checked;
    console.log(this.checked);
  }

  onSubmitForm() {
    // 提交时将布尔值转回0/1格式传给服务器
    const submitValue = this.checked ? 1 : 0;
    console.log('提交值:', submitValue);
    // 后续HTTP请求逻辑...
  }
}

对话框打开时的补充处理 #

如果HomeComponent是对话框内容组件，在父组件打开对话框传递编辑数据时，直接调用赋值方法：

// 父组件中打开对话框的逻辑
openEditDialog(serverData: any) {
  const dialogRef = this.dialog.open(HomeComponent);
  dialogRef.componentInstance.setInputSwitchPreselectedValue(serverData.ShowMe);
}

核心说明 #

• 服务器返回0时转为false（开关关闭），返回1时转为true（开关开启）；
• 通过setValue更新表单控件值，p-inputSwitch会自动同步状态；
• 提交表单时将布尔值转回0/1，保持与服务器数据格式一致。

内容的提问来源于stack exchange，提问作者JBC