如何在表单控件中使用 Primeng InputSwitch 显示预选的 boolean 值？

Question

我正在为 angular 中的p-inputSwitch苦苦挣扎。

我在另一个组件中有一个编辑按钮。 一旦我点击它，一个p-dialog就会弹出，它有下面的form 。

显示对话框时，我想让p-inputSwitch保持预选状态。 它位于表单控件内。 这是我制作的代码：

<home.component.html>

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

<home.component.ts>

export class HomeComponent implements OnInit {
  checked: boolean;

  myForm = this.fb.group({
    ShowMe: [null, Validators.required],
  });

  constructor(
    private fb: UntypedFormBuilder
  ) {}

  ngOnInit() {
    this.test();
  }

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

在服务器端，我可以看到ShowMe值存储为 0 或 1。

• 如果它是0 ，则checked应该是false并且p-inputSwitch应该是off 。
• 如果它是1 ，则checked应该是true并且p-inputSwitch应该是on 。

如何查看输入开关的预选状态？ 请帮我解决任何示例代码。

Answer 1

我修复了你的代码，有一些错误。 按照这段代码，我的本地没有 p-inputSwitch，但我在那里制作了一个复选框示例，其逻辑相同：

TS ->

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private fb: UntypedFormBuilder) {}

  checked: boolean = true;

  myForm = this.fb.group({
    ShowMe: [false, Validators.required],
  });

  ngOnInit() {
    this.myForm.patchValue({ ShowMe: false });
  }

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

  onSubmitForm() {
    
  }
}

HTML ->

<form [formGroup]="myForm" (submit)="onSubmitForm()">
  <div>
    <input
      #checkbox
      type="checkbox"
      formControlName="ShowMe"
      (change)="test(checkbox)"
    />
  </div>
</form>

https://stackblitz.com/edit/angular-ivy-61najh?file=src/app/app.component.html

祝你好运。