angular-redux / form

Keep your Angular2+ form state in Redux
MIT License
41 stars 15 forks source link

Redux Forms and Radio Buttons #31

Closed vgb1993 closed 7 years ago

vgb1993 commented 7 years ago

This is a...

What toolchain are you using for transpilation/bundling?

Environment

NodeJS Version: Typescript Version: Angular Version: 4.0.0 @angular-redux/store version: 6.1.0 @angular/cli version: (if applicable) OS:

Working

<form connect="sequences.assistantInfoForm" #assistantInfoForm="ngForm">
          <ion-list>
            <ion-list-header class="bg-light">
              {{ "SEQ.DETAILS" | translate | uppercase }}
            </ion-list-header>
            <ion-item>
              <ion-label color="primary" stacked>{{ "SEQ.NAME" | translate }}</ion-label>
              <ion-input ngControl ngModel clearInput="true" type="text" name="name" required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label color="primary" stacked>{{ "SEQ.AREA" | translate }}</ion-label>
              <ion-select ngControl ngModel name="area" required>
                <ion-option *ngFor="let area of CONST.AREAS" value="{{area.id}}">{{ area.translation | translate }}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </form>

Not working

       <form connect="sequences.assistantInfoForm" #assistantInfoForm="ngForm">
          <ion-list>
            <ion-list-header class="bg-light">
                 {{ "SEQ.ACTIVITY_TYPE" | translate | uppercase }}
            </ion-list-header>
            <ion-item>
                <ion-label>Red</ion-label>
                <ion-radio ngControl ngModel name="color" value="red"></ion-radio>
            </ion-item>
          </ion-list>
       </form>

Expected Behaviour:

Redux form also works with radio buttons

Actual Behaviour:

Can't manage to make it work

Stack Trace/Error Message:

Runtime Error
Uncaught (in promise): Error: No value accessor for form control with name: 'color' Error: No value accessor for form control with name: 'color' at g (http://localhost:8100/build/polyfills.js:3:7133) at _throwError (http://localhost:8100/build/main.js:24117:11) at setUpControl (http://localhost:8100/build/main.js:24030:9) at http://localhost:8100/build/main.js:26152:13 at t.invoke (http://localhost:8100/build/polyfills.js:3:14529) at Object.onInvoke (http://localhost:8100/build/main.js:4499:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:14469) at n.run (http://localhost:8100/build/polyfills.js:3:9741) at http://localhost:8100/build/polyfills.js:3:6774 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at Object.onInvokeTask (http://localhost:8100/build/main.js:4490:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134) at n.runTask (http://localhost:8100/build/polyfills.js:3:10390) at a (http://localhost:8100/build/polyfills.js:3:5313) at <anonymous>

Additional Notes:

Hello, I've been trying to add a radio button.

My question is, how to use angular redux forms with a radio button? I'm using Ionic 3.0

The normal text input and the select option work fine.

vgb1993 commented 7 years ago

Hy I got it working finally

<form connect="sequences.assistantInfoForm" #assistantInfoForm="ngForm">
          <ion-list radio-group ngControl ngModel name="color">
            <ion-item>
              <ion-label>Red</ion-label>
              <ion-radio  value="red"></ion-radio>
            </ion-item>
          </ion-list>
        </form>