显示在角度反应形式负载中选中的复选框

Question

我想在表单加载时显示选中的复选框。 在我的 Html 页面中：-

<div>
    Is Active
</div>
<div class="form-group">
    <input type="checkbox" formControlName="IsActive" [ngModel]="isactivechk">
</div>

我的 .ts 页面中的代码

export class UserregistrationComponent {
isactivechk:boolean=true;
}

这是在父控制器中使用它的子控件。

Answer 1

如果您正在使用 Angular Reactive Forms 并希望在表单加载时预先选中复选框，您可以按照以下步骤操作：

导入所需的模块：确保您已在组件文件中导入必要的模块（例如，your-component.ts）

 this.myForm = this.formBuilder.group({
  // Other form controls...
  myCheckbox: [true] // Set initial value to true for a pre-checked checkbox
});

在模板中绑定复选框： 在组件的模板文件（例如 your-component.component.html）中，使用 formControlName 指令

将复选框控件绑定到表单组

<form [formGroup]="myForm">
<!-- Other form controls... -->
 <input type="checkbox" formControlName="myCheckbox"> Check me
</form>

Answer 2

您可以使用 formBuilder 设置值

constructor(private formBuilder: FormBuilder) {
    this.userForm = this.formBuilder.group({
      IsActive: new FormControl(true) // Set initial value here
    });
  }