Ionic 3 Dynamic radio button formBuilder validation if all selected then enable button

Question

I am trying to validate dynamically generated radio button group that I am trying to validate but I am not sure how to validate if I add name attribute it will say its already used if I use ng-model="choice" form builder is not accepting am not sure how to validate the rest selects I have done it it's working perfectly i will be thankful if my dynamic radio button validation is solved .. below is my code ..

JS

class player {
    public id: number;
    public name: string;
}

class score {
    public id: number;
    public name: string;
}

classplayer: player[];
section: score[];

playerControl: FormControl;
scoreControl: FormControl;


constructor( public http: Http,private formBuilder: FormBuilder,public navCtrl: NavController, public navParams: NavParams) {

    this.playerControl = formBuilder.control(null, Validators.required);
    this.scoreControl = formBuilder.control(null, Validators.required);

    this.form = formBuilder.group({
        type: this.playerControl,
        class: this.scoreControl 
    });

}

HTML

<form [formGroup]="form">
    <ion-list>
        <ion-item>
            <ion-label>Name</ion-label>
            <ion-select formControlName="playerControl" (ionChange)="playerChange($event)">
                <ion-option *ngFor="let player of players" [value]="players">{{players.name}}</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label>score</ion-label>
            <ion-select formControlName="scoreControl" (ionChange)="scoreChange($event)">
                <ion-option *ngFor="let score of scores" [value]="score">{{scores.name}}</ion-option>
            </ion-select>
        </ion-item>
        <ion-grid class="table">
            <ion-title class="grey-color">Student List</ion-title>
            <ion-row class="header">
                <ion-col col-6="col-6">
                    <div text-center="text-center">
                        date / field 
                    </div>
                </ion-col>

                <ion-col class="last" col-6="col-6">
                    <div text-center="text-center">
                    Action</div>
                </ion-col>
            </ion-row>
            <ion-row class="rows" *ngFor="let details of details;  let rowIndex = index">
                <ion-col text-center="text-center" col-6="col-6">
                    [
                    {{details.date}}
                    ]<br>
                    {{students.field}}
                </ion-col>
                <ion-col class="rows last" col-6="col-6">
                    <ion-list class="row" no-lines="no-lines" radio-group="radio-group">
                        <ion-item col-4>
                            <ion-radio class="radio true" mode="md" value="true" ></ion-radio>
                        </ion-item>
                        <ion-item col-4>
                                <ion-radio class="radio false" mode="md" value="false"></ion-radio>
                        </ion-item>
                        <ion-item col-4>
                            <ion-radio class="radio " mode="md" value="not sure"></ion-radio>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list>
    <div padding-left padding-right>
        <button ion-button (click)="submit()" [disabled]="!form.valid">Submit</button>
        <button ion-button (click)="reset()" [disabled]="!countryControl.valid && !portControl.valid" color="light">Reset</button>
    </div>
</form>

Answer 1

Try this

.ts

Step: 1

import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

Step: 2

this.form = formBuilder.group({
    type: this.playerControl,
    class: this.scoreControl, 
    action: new FormControl(null, Validators.compose([
        Validators.required
        ]))
});

Next, go to your_html_file .html

Step: 1

<ion-col class="rows last" col-6="col-6">
    <ion-list class="row" no-lines="no-lines" radio-group="radio-group" formControlName="action">
        <ion-item col-4>
            <ion-radio class="radio true" mode="md" value="true" ></ion-radio>
        </ion-item>
        <ion-item col-4>
                <ion-radio class="radio false" mode="md" value="false"></ion-radio>
        </ion-item>
        <ion-item col-4>
            <ion-radio class="radio " mode="md" value="not sure"></ion-radio>
        </ion-item>
    </ion-list>
</ion-col>