Angular 从表单中的复选框中检索数据

我的问题是我有一个表单，当用户提交表单时，我想接收用户提交的数据。此数据应包装在单个对象中。我在Angular中使用formBuilder，但似乎最有可能使用formBuilder从

标记检索数据（引用“formControlName仅适用于输入、选择和文本区域。任何具有“value”属性的内容”中的顶部答案）

我已经使用formBuilder在我的构造函数和初始化字段中定义了一个表单

组件技术

在我的html中，我有两个地方供用户选择：一个下拉菜单和一组复选框。我的构造函数中的

selectedAccount

应用于

，效果很好；在提交表单时，我可以看到我选择的帐户。但是，似乎我无法应用

formControlName=“selectedContactInfo”

切换到复选框区域中的

div

；它返回空字符串

component.html

---

它不返回数据，因为您需要为复选框本身添加formControlName，您无法将其添加到divs。只需添加两个联系人信息，然后使用具有值的联系人信息，或者您可以从对象中删除空联系人信息。

它不返回数据，因为您需要为复选框本身添加formControlName，您无法添加将其添加到divs。只需添加两个联系人信息，然后使用具有值的联系人信息，或者只需从对象中删除空联系人信息。

请检查此示例

@Component({
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="rememberLogin"> Remember login
    </form>
    <p>Form value: {{ form.value | json }}</p>  
    <!-- {rememberLogin: true } -->
  `,
})
export class App {
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
        rememberLogin: [true]
    });
  }  
}

@组件({
模板：`
记住登录
表单值：{{Form.value | json}}

`,
})
导出类应用程序{
构造函数（公共fb:FormBuilder）{
this.form=this.fb.group({
rememberLogin:[对]
});
}  
}

请检查此示例

@Component({
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="rememberLogin"> Remember login
    </form>
    <p>Form value: {{ form.value | json }}</p>  
    <!-- {rememberLogin: true } -->
  `,
})
export class App {
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
        rememberLogin: [true]
    });
  }  
}

@组件({
模板：`
记住登录
表单值：{{Form.value | json}}

`,
})
导出类应用程序{
构造函数（公共fb:FormBuilder）{
this.form=this.fb.group({
rememberLogin:[对]
});
}  
}

问题 您想要的输出是一个数字数组，而选择将返回

true

或

false

，因为它是一个复选框。在这种情况下，表单包含的值与您想要的值不同，您可以使用

valueChanges

检测特定

FormControl

中的更改并提取des来自

FormControl

或

FormArray

的ired结果

解决方案 由于需要数组，首先需要为

selectedContactInfo

创建

FormArray

contactInfo={
私家车：1800124152，
workMobile:1800124124
};
this.checkoutForm=this.formBuilder.group({
所选帐户：“”，
selectedContactInfo:this.formBuilder.array（Object.keys（this.contactInfo.map）（key=>false））
});

请注意，我们正在使用

contactInfo

初始化

FormArray

。这将基本上从对象获取密钥，并使用

false

值创建一个长度相同的数组（因为最初复选框值为

false

）。当然，如果需要在默认情况下选中它，则需要将选择映射到复选框，但出于本例的考虑，我们将从所有

false

值开始

在模板中注册FormArray

在模板中设置，以便从复选框访问

true

/

false

值。使用，因为我们正在迭代对象

contactInfo

{{contactNumber.value}

在值更改中映射格式阵列

现在，

selectContactInfo

将是一个根据复选框选择的

true

/

false

值数组。但这不是我们想要的，因此我们将订阅

valueChanges

并将数据映射到

contactInfo

，并将其存储在名为

selectedContactInfo

的变量中（请注意，这不同于

格式阵列

）

const control=this.checkoutForm.controls.selectedContactInfo；
this.subscription=control.valueChanges.subscripte（值=>{
this.selectedContactInfo=Object.keys（this.contactInfo）.map（（contactNo，index）=>
control.value[index]？this.contactInfo[contactNo]：空
)
.过滤器（contactNo=>！！contactNo）；
});

我们在这里所做的基本上是从

FormArray

获取

true

/

false

数组，然后将其映射到

contactInfo

。如果复选框值为

true

，则返回数字，否则返回

null

。然后使用

过滤器
过滤掉
null
值

不要忘记取消订阅
valueChanges
订阅

ngondestory（）{
this.subscription.unsubscripte（）；
}

问题
您想要的输出是一个数字数组，而选择将返回
true
或
false
，因为它是一个复选框。在这种情况下，表单包含的值与您想要的值不同，您可以使用
valueChanges
检测特定
FormControl
中的更改并提取des来自
FormControl
或
FormArray
的ired结果

解决方案
由于需要数组，首先需要为
selectedContactInfo
创建
FormArray

contactInfo={
私家车：1800124152，
workMobile:1800124124
};
this.checkoutForm=this.formBuilder.group({
所选帐户：“”，
selectedContactInfo:this.formBuilder.array（Object.keys（this.contactInfo.map）（key=>false））
});

请注意，我们正在初始化
FormArrayonSubmit(userData) {
  console.log(userData);
}

@Component({
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="rememberLogin"> Remember login
    </form>
    <p>Form value: {{ form.value | json }}</p>  
    <!-- {rememberLogin: true } -->
  `,
})
export class App {
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
        rememberLogin: [true]
    });
  }  
}