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

debugcn 发表于 Dev

骨髓

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

使用属性语法，我可以绑定到附加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”属性的值。

用户4676340

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。