Angular 4 form validation with input fields and checkboxes

Question

I have this form right here:

<form (ngSubmit)="onSubmit()" #testForm="ngForm">

  <div class="form-group col">
    <label for="a">a</label>
    <select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>

  <div class="form-group">
    <label for="b">b</label>
    <input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">c
    </label>
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">d
    </label>
  </div>

  <div class="col text-right">
    <button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
  </div>

</form>

With this component-code behind:

export class FormComponent {
  form = new Form();
  submitted = false;
  onSubmit() {
    this.submitted = true;
  }
}

What I want to achieve is that my button only gets enabled, when both the dropdown and the input field are filled in, which works with the required attribute, AND both checkboxes are checked, which doesn't work.

My question: Is there something like required for Checkboxes, or are there other ways to solve this problem?

stackoverflow.com/questions/35462316/…

Syedur
– Syedur

2017-11-29 08:19:32 +00:00
Commented Nov 29, 2017 at 8:19 — Syedur
– Syedur, Commented Nov 29, 2017 at 8:19

Daniel Segura Pérez · Accepted Answer · 2017-11-29 09:01:39Z

1

Try this way:

 <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
    </label>
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
    </label>
  </div>

  <div class="col text-right">
    <button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
  </div>

edited Nov 29, 2017 at 9:01

answered Nov 29, 2017 at 8:19

Daniel Segura Pérez

1,1278 silver badges12 bronze badges

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

5 Comments

reveN Over a year ago

I hat to replace && with || and now it works, thank you!

Daniel Segura Pérez Over a year ago

man, your request.. AND both checkboxes are checked. if you put || then with one of checkboxes checked you got true on condition.. but ok. hope i help you!

reveN Over a year ago

I meant it like I said it. I don't know why, but the || functions like an AND instead an OR in this case. Just try it your own, its strange

reveN Over a year ago

Wait, I got it now :D I have 4 elements a,b,c,d in my form. As soon as one is not valid the button should not be clickable. => That means both checkboxes, as well as the dorpdown and the input field must be valid, and therefor the OR is perfectly right. Its not like "Enable the button when all fields are valid", but more like "disable the button as soon as one filed is not valid".

Daniel Segura Pérez Over a year ago

ouh yes, disabled should be true when one of elements is false. then the good condition is !testForm.form.valid || !ch1 || !ch2 i think. can you check this?

Collectives™ on Stack Overflow

Angular 4 form validation with input fields and checkboxes

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related