如何获取默认选中复选框的值

Question

我正在做一个包含多个复选框的项目。在那里，我希望从一开始就检查复选框，并将值放在表单中（我使用的是反应式表单）。用户可以根据自己的意愿取消选择框，数据将相应地存储。这是项目的stackblitz。在那里我能够从一开始就选中该复选框，但是当我点击提交按钮时，当我控制台登录时没有数据。我认为这是一些有约束力的问题，但我无法弄清楚到底是什么问题。有人可以帮忙吗？提前致谢。

这是代码：

<form [formGroup]="form" (ngSubmit)="submit()">
  <div class="form-group">
    <label for="website">Website:</label>
    <div *ngFor="let web of websiteList">
      <label>
        <input
          type="checkbox"
          [value]="web.id"
          (change)="onCheckboxChange($event)"
          [checked]="web.isSelected"
        />
        {{ web.name }}
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

  form: FormGroup;
  websiteList: any = [
    { id: 1, name: 'HDTuto.com', isSelected: true },

    { id: 2, name: 'HDTuto.com', isSelected: true },

    { id: 3, name: 'NiceSnippets.com', isSelected: true },
  ];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      website: this.fb.array([], [Validators.required]),
    });
  }

  ngOnInit() {}
  onCheckboxChange(e: any) {
    const website: FormArray = this.form.get('website') as FormArray;
    console.log('checking ->', e);

     if (e.target.checked) {
      website.push(new FormControl(e.target.value));
      console.log('website ->', website);
    } else {
      //console.log(e);
      const index = website.controls.findIndex((x) => {
        console.log('x.value ->', x.value);
        console.log('target.value ->', e.target.value);
        x.value === e.target.value;
      });

      website.removeAt(index);
    }
  }
  submit() {
    console.log(this.form.value);
  }

Answer 1

https://stackblitz.com/edit/angular-ivy-qar4ph?file=src/app/app.component.ts 注意模板变化：

为复选框包装器添加了 formArrayName 属性，为输入元素添加了 formControlName 属性。
删除了 change 和 checked 属性

组件ts文件中：

添加了初始表单数组值
添加映射到提交方法
删除了 onCheckboxChange 方法

如何获取默认选中复选框的值

How to get the values of default checked checkbox

javascript

checkbox

typescript

angular