angular2 group of checkboxes with required attribute

Question

i want to create a template-driven form in Angular2 (RC5), that will include a group of check-boxes, bounded to specific attributes of an object. Right now, i have such group, bounded to the corresponding array like:

<div class="checkbox" *ngFor="let prop of properties">
  <label>
    <input type="checkbox" name="option" id="option [(ngModel)]="prop.state"/> 
    {{prop.name}}
  </label>
</div>

Although this is pretty straightforward, i cannot figure out how to add a required attribute to this group of check-boxes. What i mean by that, is that i need to force user to select AT LEAST one of the group check-boxes, otherwise form validation will fail.

Any ideas?

Is this a bot? I am talking about Angular 2...

billias
– billias

2016-09-01 17:17:42 +00:00
Commented Sep 1, 2016 at 17:17 — billias
– billias, Commented Sep 1, 2016 at 17:17
Have you seen this stackoverflow.com/questions/6218494/…

wickdninja
– wickdninja

2017-03-28 13:03:42 +00:00
Commented Mar 28, 2017 at 13:03 — wickdninja
– wickdninja, Commented Mar 28, 2017 at 13:03

Michael Fedora · Accepted Answer · 2017-05-03 03:46:36Z

2

I assume you have an object or array with all of your states, if I'm reading correctly, i.e.

properties = [
  { state: false },
  { state: false },
  { state: false },
  // ... etc
];

You could figure out if at least one is checked by listening to (ngModelChange) on each of the elements. When it fires, you can then check to make sure at least one of prop's states is true, i.e. in your template file:

<input type="checkbox" name="option" id="option" [(ngModel)]="prop.state" (ngModelChange)="onCheckboxChange()"/>

And in your class, have a field like atLeastOnePropIsTrue, and then your onCheckboxChange function can look like this:

function onCheckboxChange() {
    this.atLeastOnePropIsTrue = this.properties.find(a => a.state === true) != null;
}

It's not exactly pretty, but it would work.

edited May 3, 2017 at 3:46

answered May 3, 2017 at 0:40

Michael Fedora

5664 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

angular2 group of checkboxes with required attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related