jQWidgets and Reactive forms

[adrenalinedjParticipant]

Hello,

I wanna know if jQWidgets can be used with Reactive Forms.
If so, do you have some example, please ?

Thanks in advance.

[Ivo ZhulevParticipant]

Hi adrenalinedj,

Yes, jQWidgets is fully compatible with Reactive Forms. We will soon have a full featuring example of it.

For now look at this example:

reactive form control with native HTML Elements:

<form [formGroup]="stepOneForm" novalidate>
    <div class="form-group">
        <label class="center-block">Email:

            <input formControlName="email">      <<<---------------------

        </label>
        <div *ngIf="errMsgs.email.length" class="alert alert-danger">
            <ul>
                <li *ngFor="let error of errMsgs.email">
                    {{error}}
                </li>
            </ul>
        </div>
    </div>
</form>

reactive form control with jQWidgets Angular Elements:

<form [formGroup]="stepOneForm" novalidate>
      <div class="form-group">
          <label class="center-block">Email:

              <jqxInput formControlName="email"></jqxInput>      <<<---------------------

          </label>
          <div *ngIf="errMsgs.email.length" class="alert alert-danger">
              <ul>
                  <li *ngFor="let error of errMsgs.email">
                     {{error}}
                  </li>
              </ul>
          </div>
      </div>
</form>

As you can see all you need to do is replace the native controls with jQWidgets one’s.
Everything else is the same.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[adrenalinedjParticipant]

Nice.
Thanks for the example.

Does this works with Combobox and Dropdownlist ?
Does this works with form validation ?

[adrenalinedjParticipant]

Do you have any example with ComboBox (or DropdownList) ?

[Peter StoevKeymaster]

We still do not have samples with the DropDownList or ComboBox Angular components. As soon as we build additional samples, we will upload them on the http://www.jqwidgets.com/angular/ and will add them to the documentation page.

[Author]

Posts