Angular 5：获取JSON对象中的复选框值，复选框名称为key，true / false为value？

Question

我有一个带有复选框名称的表格，例如Apple和Mango。 当我检查一个/两个/无时，我希望在提交表单时将值存储在JSON中。

如何在Angular 5中做同样的事情？

Answer 1

以下是如何通过Reactive Form实现它：

xxx.component.html

<div [formGroup]="form" (ngSubmit)="onSubmit()">
     <div>
         <input type="checkbox" formControlName="apple">
         <input type="checkbox" formControlName="mango">
     </div>
     <button type="submit">Submit</button>
</div>

xxx.component.ts

form = this.fb.group({
    apple: true,  // initial value
    mango: false
  }
);

onSubmit() {
  console.log(this.form.value); // this is JSON
}

如果要存储字符串Apple或Mango，可以验证从this.form.value

返回的布尔结果