How to validate a radiogroup or radio buttons?


#1
<form [formGroup]="regForm" novalidate>
<ion-list radio-group 
                        formControlName="questionAnswer"
                        *ngFor="let questionAnswer of questionAnswers, let i=index">
                        <ion-label class="custom-label"><span class="custom-required"></span>
                            {{questionAnswer.label}} 
                            <p class="custom-required-text">
                                <!--*ngIf="questionForm.controls.answer.valid && submitted"-->
                                Required
                            </p>
                        </ion-label>
                        <ion-item *ngFor="let answers of questionAnswer.answersList; let idx = index" class="clear-background custom-radio">
                            <ion-label><span class="item-number">{{idx + 1}}. </span><span class="info">{{answers.label}}</span></ion-label>
                            <ion-radio formControlName="answer" [value]="answers.answerId" required (click)="">{{answers.label}}</ion-radio>
                           
                        </ion-item>
                    </ion-list>

</form>

#2

if you mean validate if they are empty or not you can use the Validators
let’s say that you have a FormBuilder with the name form and the form in your html page is called regForm you can do the following in the constructor :

this.regForm = form.group({
answer : ['', Validators.required]
});

and then if you want to check if the form is valid you can write :
this.regForm.valid =>this will return true if the form is valid
we don’t have your code and don’t have any description so that is the most far I can help you with


#3

Thanks for your quick response!!

I have setup the form using formBuilder

this.regForm = this.formBuilder.group({
answer: [’’, Validators.required]
});

but I am getting the following error.

ERROR Error: No value accessor for form control with name: 'answer’
at _throwError (forms.es5.js:1833)
at setUpControl (forms.es5.js:1743)
at FormGroupDirective.addControl (forms.es5.js:4714)
at bound.FormControlName._setUpControl (forms.es5.js:5302)
at bound.FormControlName.ngOnChanges (forms.es5.js:5220)
at checkAndUpdateDirectiveInline (core.es5.js:10702)
at checkAndUpdateNodeInline (core.es5.js:12084)
at checkAndUpdateNode (core.es5.js:12052)
at debugCheckAndUpdateNode (core.es5.js:12681)
at debugCheckDirectivesFn (core.es5.js:12622)


#4

It seems to me like you are looping across questionAnswers.answersList yet always attempting to bind each radio button to answer. This doesn’t make much sense to me. I also don’t see why you have both formControlName and [value]. Shouldn’t it be one or the other?


#5

I did not have formControlName=“answer” earlier. {{ regForm.controls.questionAnswer.valid }} is always true even though I never selected anything. I thought maybe formControlName needs to be added at the radio level hence its there. I am new to Ionic 3. Any links or tips are appreciated. Thanks!