Submitting multiples values through single checkbox using Angular 2 reactive form

Question

I'm looking for the best way to submit multiple values through a single checkbox. The values are are being saved in a service.

Using the attribute syntax I can bind to an additional data-* property. Is there a way to consolidate the the values of the custom data-* and value attributes to send together on 'submission' or should this be approached differently using the getAttribute() method?

Template

<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

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

}

EDIT: For clarity, I would like to submit/save multiple values which are assigned to a single checkbox. These are the values assigned to the 'value' attribute and the data-stock-sku/attr.data-stock-sku attribute in the HTML. However on submission Angular only sends through the value assigned to the 'value' attribute by default.

You mean you want to submit the form when the checkbox is ticked? — CozyAzure
– CozyAzure, Commented Jul 3, 2017 at 13:43
Sorry if that wasn't too clear. I would like to submit/save multiple values which are assigned to a single checkbox. These are the values assigned to the 'value' attribute and the data-stock-sku/attr.data-stock-sku attribute in the HTML. However on submission Angular only sends through the value assigned to the 'value' attribute by default. Hopefully these clears things up — bmd
– bmd, Commented Jul 3, 2017 at 13:47
Ah I see. I would suggest that since you are using reactive forms, you can build another form that stores your stock object (and you do not need to display them in your html. Then, you can subscribe to your checkbox value, and decide what to do with your stock form. — CozyAzure
– CozyAzure, Commented Jul 3, 2017 at 13:52

user4676340 · Accepted Answer · 2017-07-03 14:24:33Z

1

Since you use the size as an unique ID, I would rather retrieve data then send it, rather than assigning several values to an HTML component (that is supposed to handle strings)

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

answered Jul 3, 2017 at 14:24

user4676340

Sign up to request clarification or add additional context in comments.

6 Comments

bmd Over a year ago

Thanks, trichetriche. I'm not sure if this is exactly what you had in mind but your answer def. pointed me in the right direction. I've created an addition formControl name sku which is hidden from the HTML template. And the value assigned right before 'submission'.

this.availableStock.filter((element) => { if(element.size == this.myForm.get('size').value) { this.myForm.get("sku").setValue(element.sku) } })

... of course I welcome any feedback

user4676340 Over a year ago

This is ... Absolutely not what I meant. I strongly dislike your method, I've never used hidden fields in my life and I really dont' like it. But it's totally personal, and as they say, "whatever floats your boat" ! Anyway, I'm glad I could help you.

bmd Over a year ago

Right. I've misunderstood. Could you clarify at all?

user4676340 Over a year ago

What should I clarify ? Why I do think that ?

user4676340 Over a year ago

Oh okay, all I was saying is that you should go through your array to find the corresponding sku of the size the user selected.

|

Collectives™ on Stack Overflow

Submitting multiples values through single checkbox using Angular 2 reactive form

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related