javascript - 使用 Angular 2 响应式(Reactive)表单通过单个复选框提交多个值

Question

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

使用属性语法，我可以绑定(bind)到附加的 data-* 属性。有没有办法合并自定义 data-* 和 value 属性的值以在“提交”时一起发送，或者应该使用 以不同的方式处理此问题getAttribute() 方法？

模板

<form [formGroup]="myForm" novalidate>
    <template ngFor let-stock [ngForOf]="availableStock">
                <p><label><input type="radio" formControlName="size" [value]="stock.size" [attr.data-stock-sku]="stock.sku" [id]="stock.size">{{ stock.size }}</label></p>  
    </template>

    <p><button type="submit" (click)="onSubmit()">Submit</button></p>
</form>

组件

@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
        }
    }

}

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

Answer 1

由于您使用大小作为唯一 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
    }
}