Javascript 使用Angular 2被动表单通过单个复选框提交多个值

我正在寻找通过一个复选框提交多个值的最佳方法。这些值正在保存到服务中

使用属性语法，我可以绑定到其他data-*属性。是否有一种方法可以合并自定义数据-*和值属性的值，以便在“提交”时一起发送，或者使用getAttribute方法进行不同的处理

模板

组成部分

---

编辑：为清楚起见，我想提交/保存分配给单个复选框的多个值。这些是分配给HTML中“值”属性和数据库存sku/attr.data-stock-sku属性的值。但是，在提交时，Angular默认情况下仅通过分配给“value”属性的值发送数据。

由于您使用大小作为唯一ID，因此我宁愿先检索数据，然后发送数据，而不是将多个值分配给本应处理字符串的HTML组件

onSubmit() {
    if(this.myForm.valid) {
        let userSelectedValue = this.availableStock.find(stock => stock.size === this.myForm.get('size').value);
        // Use your value here 
    } else {
        // Handle your errors yourself
    }
}

---

你的意思是你想在勾选复选框时提交表单？如果不太清楚，很抱歉。我想提交/保存分配给单个复选框的多个值。这些是分配给HTML中“值”属性和数据库存sku/attr.data-stock-sku属性的值。但是，在提交时，Angular仅通过默认情况下分配给“value”属性的值发送。希望这些都能让我明白。我建议，由于您使用的是被动表单，您可以构建另一个表单来存储您的库存对象，而不需要在html中显示它们。然后，您可以订阅您的复选框值，并决定如何处理您的股票表单。谢谢，特里谢。我不确定这是否正是你想要的，但你的答案是肯定的。给我指出了正确的方向。我已经创建了一个附加的formControl名称sku，它从HTML模板中隐藏。以及在“提交”之前分配的值。this.availableStock.filterelement=>{ifelement.size==this.myForm.get'size'。值{this.myForm.getsku.setValueelement.sku}}。。。当然我欢迎任何反馈这是。。。绝对不是我的意思。我非常不喜欢你的方法，我从来没有使用过隐藏字段，我真的不喜欢它。但这完全是个人的事，就像他们说的，无论什么能让你的船漂浮！不管怎样，我很高兴我能帮助你。我误解了。你能澄清一下吗？我应该澄清什么？为什么我这么认为？哦，好吧，我只是说你应该通过你的数组找到用户选择的相应sku大小。

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})

export class ReactiveFormComponent implements OnInit {
    public myForm: FormGroup;
    public availableStock: Array<{"size": string, "sku": string}> = [{"size": "36", "sku": "5409756"}, {"size": "38", "sku": "5409750"},{"size": "40", "sku": "5409754"}];

    constructor(private _formBuilder: FormBuilder) {
        this.createForm();
    }

    createForm(){
        this.myForm = this._formBuilder.group({
            size: [ null , Validators.required  ]
        });
    }

    ngOnInit() {
    }

    onSubmit() {
        if(this.myForm.valid) {
            // submit form eg this._formService.saveFormValues(this.myForm.value);
        } else {
            // display errors
        }
    }

}

onSubmit() {
    if(this.myForm.valid) {
        let userSelectedValue = this.availableStock.find(stock => stock.size === this.myForm.get('size').value);
        // Use your value here 
    } else {
        // Handle your errors yourself
    }
}