使用 Angular 2 反应形式通过单个复选框提交多个值

Question

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

使用属性语法我可以绑定到额外的 data-* 属性。有没有办法合并自定义 data-* 和 value 属性的值以在 'submission' 上一起发送，或者应该使用 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
        }
    }

}

编辑：为清楚起见，我想 submit/save 多个值分配给一个复选框。这些是分配给 'value' 属性和 data-stock-sku/attr.data-stock-sku 属性的值 HTML。但是在提交时 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
    }
}

使用 Angular 2 反应形式通过单个复选框提交多个值

Submitting multiples values through single checkbox using Angular 2 reactive form

javascript

angular

angular-reactive-forms

angular-forms